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

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

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

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

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

Q: Editorconfig 又起了什么作用？

  1. 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

  1. module.exports = {
  2.   env: {
  3.     browser: true,
  4.     es6: true,
  5.     node: true
  6.   },
  7.   extends: ['airbnb', 'prettier'],
  8.   parser: 'babel-eslint',
  9.   parserOptions: {
  10.     ecmaFeatures: {
  11.       jsx: true
  12.     }
  13.   },
  14.   plugins: ['react'],
  15.   rules: {
  16.     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  17.     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  18.     'react/prefer-stateless-function': 0, // 关闭react默认的props-type验证
  19.     'react/prop-types': [0],
  20.     'react/jsx-closing-bracket-location': 'off',
  21.     'consistent-return': 'off',
  22.     // 关闭使用解构赋值的检测
  23.     'react/destructuring-assignment': [0, 'always'],
  24.     // 解决require报错问题
  25.     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
  26.     'react/jsx-wrap-multilines': 'off',
  27.     'global-require': 0,
  28.     'jsx-a11y/no-static-element-interactions': 0,
  29.     'jsx-a11y/click-events-have-key-events': 0
  30.   }
  31. };

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

module.exports = {

…….

}

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

  1. {
  2.   env: {
  3.     browser: true,
  4.     es6: true,
  5.     node: true
  6.   },
  7.   extends: ['airbnb', 'prettier'],
  8.   parser: 'babel-eslint',
  9.   parserOptions: {
  10.     ecmaFeatures: {
  11.       jsx: true
  12.     }
  13.   },
  14.   plugins: ['react'],
  15.   rules: {
  16.     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  17.     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  19.   }
  20. }

2. 安装 prettier 相关

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

2.2 新建 .prettierrc.js

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

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

module.exports = {

…….

}

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

  1. {
  2.   "jsxSingleQuote": true,
  3.   "printWidth": 120,
  4.   "tabWidth": 2,
  5.   "semi": true,
  6.   "singleQuote": true,
  7.   "trailingComma": "none",
  8.   "jsxBracketSameLine": true
  9. }

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

3.1 运行 npm i -D lint-staged husky

4. 修改package.json








  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
 
  1. {
      “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”
      }
    }

使用编辑器插件

vscode

在用户设置setting.json中添加

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

配置完成以后，由于新下载的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

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

参考

参考教程

ant-design-pro

用 Prettier 格式化 JavaScript 代码

EditorConfig 的介绍

发表评论

表情：
评论列表 （有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读