在create-react-app项目下，使用eslinit和prettier美化代码

- 日理万妓 2023-02-20 10:59 5阅读 0赞

虽然官方脚手架create-react-app当中默认提供了eslint，但是由于官方的配置不是很充分，导致了在是进行代码优化方面不是很理想。但是，我们可以自行配置达到写出高质量代码的目的。

### ESlint 不是自带格式化吗？为什么还要用 Prettier。 ###

A: ESlint的重心在代码质量，Prettier只关心代码格式。

### Q: Editorconfig 又起了什么作用？ ###

A: EditorConfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。

## 介绍 ##

### [Prettier][] 一个简洁的代码格式化工具 ###

### [eslint-config-prettier][] 使用 eslint 兼容 Prettier 的规则 ###

### [lint-staged][] 和 [husky][] git 的 hook 钩子工具 ###

## 安装 ##

### 1. 安装 `eslint` 相关 ###

1.1 运行 `npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react`

1.2  新建 .`eslintrc.js`

module.exports = {
      env: {
        browser: true,
        es6: true,
        node: true
      },
      extends: ['airbnb', 'prettier'],
      parser: 'babel-eslint',
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        }
      },
      plugins: ['react'],
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'react/prefer-stateless-function': 0, // 关闭react默认的props-type验证
        'react/prop-types': [0],
        'react/jsx-closing-bracket-location': 'off',
        'consistent-return': 'off',
        // 关闭使用解构赋值的检测
        'react/destructuring-assignment': [0, 'always'],
        // 解决require报错问题
        'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
        'react/jsx-wrap-multilines': 'off',
        'global-require': 0,
        'jsx-a11y/no-static-element-interactions': 0,
        'jsx-a11y/click-events-have-key-events': 0
      }
    };

注：如果使用.`eslintrc.js进行配置的话`，要把配置的代码写在

module.exports = \{

.......

当中，如上面的配置。如果采用.`eslintrc文件进行配置，则需要写成JSON格式：`

{
      env: {
        browser: true,
        es6: true,
        node: true
      },
      extends: ['airbnb', 'prettier'],
      parser: 'babel-eslint',
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        }
      },
      plugins: ['react'],
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       
      }
    }

### 2. 安装 `prettier` 相关 ###

2.1 运行 `npm i -D prettier eslint-config-prettier`

2.2 新建 .`prettierrc.js`

module.exports = {
      // 使能每一种语言默认格式化规则
      '[html]': {
        'editor.defaultFormatter': 'esbenp.prettier-vscode'
      },
      '[css]': {
        'editor.defaultFormatter': 'esbenp.prettier-vscode'
      },
      '[less]': {
        'editor.defaultFormatter': 'esbenp.prettier-vscode'
      },
      '[javascript]': {
        'editor.defaultFormatter': 'esbenp.prettier-vscode'
      },
      printWidth: 120,
      trailingComma: 'none',
      jsxBracketSameLine: true,
      /*  prettier的配置 */
      printWidth: 100, // 超过最大值换行
      tabWidth: 2, // 缩进字节数
      useTabs: false, // 缩进不使用tab，使用空格
      semi: true, // 句尾添加分号
      singleQuote: true, // 使用单引号代替双引号
      proseWrap: 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
      arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
      bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
      //'prettier.disableLanguages': ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
      endOfLine: 'auto', // 结尾是 \n \r \n\r auto
      // eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
      'prettier.htmlWhitespaceSensitivity': 'ignore',
      'prettier.ignorePath': '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
      jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
      jsxSingleQuote: false // 在jsx中使用单引号代替双引号
      //parser: 'babylon', // 格式化的解析器，默认是babylon
      //requireConfig: false, // Require a 'prettierconfig' to format prettier
      //stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
      //trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
      //tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验
    };

注：如果使用.`eslintrc.js进行配置的话`，要把配置的代码写在

module.exports = \{

.......

当中，如上面的配置。如果采用 .`prettierrc文件进行配置，则需要写成JSON格式：`

{
      "jsxSingleQuote": true,
      "printWidth": 120,
      "tabWidth": 2,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "none",
      "jsxBracketSameLine": true
    }

### 3. 配置 Pre-commit Hook git 提交前格式化和检查代码 ###

3.1 运行 `npm i -D lint-staged husky`

### 4. 修改`package.json` ###

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</code></pre> </td> 
   <td> <pre><code>{
  "scripts": {
    "lint": "eslint --ext .js src",
    "lint:fix": "eslint --fix --ext .js src",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js src",
    "format": "prettier --write ./src/**/**/**/*.js"
  },
   "lint-staged": {
    "**/*.js": [
      "prettier --write",
      "git add"
    ],
    "**/*.js": "npm run lint-staged:js"
  }
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

## 使用编辑器插件 ##

### vscode ###

在用户设置setting.json中添加

{
    "prettier.eslintIntegration": true, 
    "editor.formatOnSave": true, // 保存自动格式化
    "eslint.autoFixOnSave": true // 保存自动检查代码
    }

配置完成以后，由于新下载的eslint插件与create-react-app脚手架自带的eslinit可能会存在版本上的差异，当运行项目的时候，或许会产生如下的错误：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

出现这个错误以后的解决方式是：

1、在node\_modules依赖包当中找到eslinit这个文件夹删除；

2、在文件package.json当中删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1][]

3、重新下载eslinit安装包，这个安装包的版本要与create-react-app脚手架自带的eslinit版本保持一致，

例如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2][]

npm install eslinit@6.6.0 -D

下载完成后，重新启动即可；

## 参考 ##

[参考教程][Link 1]

[ant-design-pro][]

[用 Prettier 格式化 JavaScript 代码][Prettier _ JavaScript]

[EditorConfig 的介绍][EditorConfig]

[Prettier]: https://github.com/prettier/prettier
[eslint-config-prettier]: https://github.com/prettier/eslint-config-prettier
[lint-staged]: https://github.com/okonet/lint-staged
[husky]: https://github.com/typicode/husky
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200626165210639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200626165458632.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020062616564737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70
[Link 1]: https://www.dazhuanlan.com/2019/10/16/5da730e36b875/
[ant-design-pro]: https://pro.ant.design/index-cn
[Prettier _ JavaScript]: https://www.infoq.cn/article/using-prettier-format-javascript-code/
[EditorConfig]: http://www.alloyteam.com/2014/12/editor-config/