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", //是否使用尾逗号，有三个可选值"<none|es5|all>""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
<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}>Click Here
</button>// false example
<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}
>Click Here
</button>

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 filesplugins: ['vue'],// add your custom rules hererules: {"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 你的代码。

英文原文