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

 

虽然官方脚手架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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{ "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中添加

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

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

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

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

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

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

例如：

npm install [email protected] -D

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

参考

参考教程

ant-design-pro

用 Prettier 格式化 JavaScript 代码

EditorConfig 的介绍