Articles19
Tags0
Categories0

使用ESLint和Prettier来规范前端代码

先看看Prettier的作用:

gif

https://segmentfault.com/img/remote/1460000015315548?w=500&h=300

它可以支持jsx 、css等,更多的关于Prettier支持的文件可查看官网https://prettier.io/docs/en/index.html

接下来,主要是来看看如何使用

1.第一步,当然就是先安装:

使用npm:

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

使用yarn:

yarn add prettier --dev --exact
# or globally
yarn global add prettier

2.配合ESLint,安装插件

插件1:eslint-plugin-prettier

yarn add --dev prettier eslint-plugin-prettier

或使用npm:

npm i -g eslint-plugin-prettier

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被prettier进行标记。

接下来,我们需要在rules中添加,"prettier/prettier": "error",表示被prettier标记的地方抛出错误信息。

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

ESLint 有autofix功能,在保存代码时可以自动在抛出error的地方进行fix。如果是使用webpack,配置如下:

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.join(__dirname, 'src')],
        options: {
          fix: true
        }
      }
    ]
}

如果是cli:那么只需要在后面加上fix即可,如:eslint --fix

插件2:eslint-config-prettier

npm i -D eslint-config-prettier
yarn add --dev eslint-config-prettier

通过使用eslint-config-prettier配置,能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保,这个配置在extends的最后一项。

/.eslintrc.js
{
  extends: [
    "prettier",
  ],
}

参考的基本配置:

{
  // 排版宽度,即每行最大宽度,默认值是80
  "printWidth":100,
  // 制表符宽度,每个层级缩进几个空格,默认值为2
  "tabWidth": 2,
  // 是否使用 tab 替代 space 为单位缩进,默认值为false
  "useTabs": false,
  // 分号,句尾是否自动补全分号,默认为true
  "semi": true,
  // 启用双引号,不启用单引号,默认为true
  "singleQuote": true,
  // 在 JSX 文件中使用单引号替代双引号,默认为 false
  "jsxSingleQuote": true,
  // 为多行数组的非末尾添加逗号(单行数组不需要逗号),数值:none(不添加逗号)、es5(在ES5中生效的逗号,对象数组等),all(任何可以添加逗号的地方)
  "trailingComma": "es5",
  // 括号空格,在对象字面量和括号之间添加空格,默认为 true
  "bracketSpacing": true,
  // 将多行 JSX 元素的 > 放置于最后一行的末尾,而非换行。默认为 false
  "jsxBracketSameLine": false,
  // 箭头函数圆括号,默认为 avoid(在可以消除的情况下,消除括号),always(一直保留括号)
  "arrowParens": "avoid",
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

3.参考链接:

(1)http://laibh.top/2019-08-08-%E5%B7%A5%E6%AC%B2%E5%96%84%E5%85%B6%E4%BA%8B%EF%BC%8C%E5%BF%85%E5%85%88%E5%88%A9%E5%85%B6%E5%99%A8(eslint+prettier).html

(2)https://segmentfault.com/a/1190000015315545

(3)https://www.jianshu.com/p/d6a69eb08f07

Author:shuo
Link:http://yoursite.com/2019/08/24/Prettier/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可