ESLint 与 Prettier使用

如何设置 Prettier？

在你的文件夹中，在命令行中敲入，创建一个 package.json 文件：

npm init -y

安装我们的第一个依赖项：

npm add --dev prettier
npm i -D eslint-plugin-prettier

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

现在在根文件夹中创建一个 prettier.config.js 文件，并在其中添加一些 Prettier 规则：

module.exports = {
  "printWidth": 100, //一行的字符数，如果超过会进行换行，默认为80
  "singleQuote": true,
  "jsxBracketSameLine": false,
  "tabWidth": 2,  //一个tab代表几个空格数
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值""
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
};

printWidth 将确保你的单行代码不会超过 100 个字符。

singleQuote 会将所有双引号转换为单引号。

trailingComma 将确保在最后一个对象属性的末尾会有一个逗号。

bracketSpacing 在对象字面量之间打印空格：

If bracketSpacing is true - Example: { foo: bar }
If bracketSpacing is false - Example: {foo: bar}

jsxBracketSameLine 将在多行 JSX 元素的最后一行放置>：

// true example

  Click Here


// false example

  Click Here

tabWidth 指定单个缩进的空格数。

如果 semi 设置为 true，将在语句末尾加上   ;   。

---

现在让我们来说说这个脚本的作用：

“prettier”: “prettier  — write src/**/*.js”

它的意思是运行 prettier，并让它在 src/ 文件夹中查找所有的.js 文件。--write 标志告诉 prettier 要把格式化好的内容保存到文件中，并找出格式化过程中发现的任何异常。

---

现在在终端中运行这个脚本：

npm prettier

如何设置 ESLint？

---

介绍一些相关的：

eslint-config-airbnb：这个包提供了所有 Airbnb 的 ESLint 配置，你可以修改它们。

eslint-plugin-babel：babel-eslint 的插件伴侣。

eslint-plugin-import：这个插件旨在支持 ES2015+（ES6+）的导入 / 导出语法，并防止出现拼写错误的文件路径和导入名称。

eslint-plugin-jsx-a11y：适用于 JSX 元素可访问性规则的 linting 规则。

eslint-plugin-prettier：让 ESLint 与 Prettier 的使用更顺畅。

eslint-plugin-react：特定于 React 的 linting 规则。

eslint-config-jest-enzyme：用于特定于 React 和 Enzyme 的全局变量。这个 lint 配置让 ESLint 知道有哪些全局变量，并且不会针对它们发出警告——有点像断言 it 和 describe。

eslint-plugin-jest：Jest 的 ESLint 插件。

---

同上，安装eslint：

在根目录创建.eslintrc.js 文件：

module.exports = {
    env: {
        es6: true,
        browser: true,
        node: true,
    },
    extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],
    plugins: [
        'babel',
        'import',
        'jsx-a11y',
        'react',
        'prettier',
    ],
    parser: 'babel-eslint',
    parserOptions: {
        ecmaVersion: 6,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    rules: {
        'linebreak-style': 'off', // Don't play nicely with Windows.
        'arrow-parens': 'off', // Incompatible with prettier
        'object-curly-newline': 'off', // Incompatible with prettier
        'no-mixed-operators': 'off', // Incompatible with prettier
        'arrow-body-style': 'off', // Not our taste?
        'function-paren-newline': 'off', // Incompatible with prettier
        'no-plusplus': 'off',
        'space-before-function-paren': 0, // Incompatible with prettier
        'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases
        'no-console': 'error', // airbnb is using warn
        'no-alert': 'error', // airbnb is using warn
        'no-param-reassign': 'off', // Not our taste?
        "radix": "off", // parseInt, parseFloat radix turned off. Not my taste.
        'react/require-default-props': 'off', // airbnb use error
        'react/forbid-prop-types': 'off', // airbnb use error
        'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
        'prefer-destructuring': 'off',
        'react/no-find-dom-node': 'off', // I don't know
        'react/no-did-mount-set-state': 'off',
        'react/no-unused-prop-types': 'off', // Is still buggy
        'react/jsx-one-expression-per-line': 'off',

        "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],
        "jsx-a11y/label-has-for": [2, {
            "required": {
                "every": ["id"]
            }
        }], // for nested label htmlFor error

        'prettier/prettier': ['error'],
    },
};

'prettier/prettier': ['error'] 表示被prettier标记的地方抛出错误信息。

还要在根目录中添加.eslintignore 文件：

/.git
/.vscode
node_modules

我们先介绍一下.eslintrc.js 文件的作用。

先把它拆分一下：

module.exports = { 
   env:{}, 
   extends: {}, 
   plugin: {}, 
   parser: {}, 
   parserOptions: {}, 
   rules: {},
};

1. env：用于预定义全局变量。在我们的例子中，可用的环境包括 es6、browser 和 es6。es6 将启用除模块之外的所有 ECMAScript 6 功能。browser 将添加所有浏览器全局变量，如 Windows。node 将添加 Node 全局变量和 Node 作用域，比如 global。

2. extends：字符串数组——扩展了之面配置的额外配置选项。现在我们正在使用 airbnb 的 linting 规则，这些规则被扩展到 jest，然后是 jest-enzyme。

3. plugins：插件基本上就是我们想要使用的 linting 规则。现在我们正在使用 babel、import、jsx-a11y、react、prettier。

4. parser：默认情况下，ESLint 使用 Espree，但因为我们使用了 babel，我们还需要使用 Babel-ESLint。

5. parserOptions：如果我们将 Espree 的默认解析器更改为 babel-eslint，需要指定 parserOptions——它是必需的。我通过选项告诉 ESLint，ecmaVersion 是 6。因为我们在 EcmaScript 模块（而不是 script）中编写代码，所以我们将 sourceType 指定为 module。由于我们使用了 React，引入了 JSX，所以在 ecmaFeatures 中加了 jsx 选项，并将其设置为 true。

6. rules：我们已经扩展并通过插件添加的所有规则，我们可以更改或覆盖它们。

介绍一下.eslintignore

.eslintignore 里包含了我们不希望 ESLint 对它们进行 lint 的路径列表。这里我只指定三个：

1. /.git——我不希望 Git 相关文件被 lint。

2. /.vscode——由于我使用的是 VS Code，这个编辑器提供了自己的配置文件，我不希望配置文件被 lint。

3. node_modules——我不希望依赖项被 lint，所以把这个目录也添加到列表中。

在vue中使用

借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。因为我们项目是在webpack中引入eslint-loader来启动eslint的，所以我们只要稍微修改webpack的配置，就能在启动webpack-dev-server的时候，每次保存代码同时自动对代码进行格式化。

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

如果你的eslint是直接通过cli方式启动的，那么只需要在后面加上fix即可，如：eslint --fix。

如果与已存在的插件冲突怎么办

npm i -D eslint-config-prettier

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

//.eslintrc.js
{
  extends: [
    'standard', //使用standard做代码规范
    "prettier",
  ],
}

这里有个文档，列出了会与prettier冲突的配置项。

同时使用上面两项配置

如果你同时使用了上述的两种配置，那么你可以通过如下方式，简化你的配置。

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

 

这个是在vue-cli生成的代码基础上修改的，并且使用standard做代码规范：

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

在VScode中使用

我们设置好了 prettier 和 eslint，但每次我们都要运行脚本。接下来我们让它更加自动化一些。

1. 在编辑器中按下 ctrl + s 时格式化和 lint 代码。

2. 每次提交代码时，自动对代码进行 lint 和格式化。

3. 要在保存代码时进行格式化和 lint，需要使用像 VS Code 这样的编辑器：

安装 ESLint 扩展插件。在此（https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint）下载插件或在 VS Code 编辑器中按下 ctrl + shift + x 打开扩展模块，搜索 eslint，将出现一系列插件。安装 Dirk Baeumer 开发的那个。安装完成后，点击 reload 按钮重新启动编辑器。

安装好这个插件后，在 app/ 根文件夹中创建一个名为.vscode/ 的文件夹 ——不要忘了那个点号，这个非常重要。

在文件夹中创建一个 settings.json 文件，如下所示：

{
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
}

 

• editor.formatOnSave——我在这里将它设置为 false，因为我不希望文件格式的默认编辑器配置与 ESLint 和 Prettier 发生冲突。

• eslint.autoFixOnSave——我在这里将它设置为 true，因为我希望每次在保存文件时安装的插件都能正常工作。由于 ESLint 的配置关联了 Prettier 的配置，所以每次在点击保存时，它都会格式化和 lint 你的代码。

---

英文原文