ESLint 与 Prettier使用

分手后的思念是犯贱 2022-04-06 15:10 446阅读 0赞

### 如何设置 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
    <button
      className="prettier-class"
      id="prettier-id"
      onClick={this.handleClick}>
      Click Here
    </button>
    
    // false example
    <button
      className="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",
      ],
    }

这里有个[文档][Link 1]，列出了会与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 你的代码。

--------------------

[英文原文][Link 2]

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fprettier%2Feslint-config-prettier%23special-rules
[Link 2]: https://medium.freecodecamp.org/these-tools-will-help-you-write-clean-code-da4b5401f68e