react中使用eslint+prettier+airbnb校验代码风格

时间：2024-03-28 16:21:22

刚开始学习react，发现官方脚手架里没有提供eslint，对于我这个有代码洁癖的人来说不能忍啊，下面是我引入eslint的过程

一 、安装依赖
npm i eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react babel-eslint babel-plugin-import  --save-dev
二、创建eslint 和 prettier配置文件

创建 .eslintrc.js, 也可以使用json格式的，具体可以查看eslint官方文档
配置如下：

module.exports = {
  'env': {
    'browser': true,
    'es6': true,
    'node': true
  },
  'extends': ['airbnb', 'plugin:prettier/recommended'],
  'parser': 'babel-eslint',
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true
    }
  },
  'plugins': [
    'react'
  ],
  'rules': {
    // 关闭react默认的props-type验证
    'react/prop-types': [0],
    //关闭使用解构赋值的检测
    'react/destructuring-assignment': [0, 'always'],
    // 解决require报错问题
    'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }]
  }
}

创建.prettierrc 配置文件，可覆盖eslint规则，具体规则配置请查看prettier 官方文档
配置如下：

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

到这里基本配置就完成了，项目也拥有了eslint校验的功能了
react中使用eslint+prettier+airbnb校验代码风格
react中使用eslint+prettier+airbnb校验代码风格

扩展说明

在webstrom里面使用prettier进行自动格式化

  1. 在设置里面打开eslint校验工具
    react中使用eslint+prettier+airbnb校验代码风格
  2. 在设置里面启动prettier格式化工具
  3. react中使用eslint+prettier+airbnb校验代码风格
    4react中使用eslint+prettier+airbnb校验代码风格
    然后代码保存时就会自动格式化了

在vscode里面保存也能自动格式化
4. 安装eslint prettier 插件扩展
react中使用eslint+prettier+airbnb校验代码风格
react中使用eslint+prettier+airbnb校验代码风格
这里注意一下，就是如果你的项目文件里没有prettier配置文件，格式化的时候代码就会格式化成不是你想要的格式，出现这样的情况你可以在vscode prettier插件里面根据官方文档配置一下，或者在你的项目里面创建prettier配置文件 如：.prettierrc

  1. 在vscode 里面修改设置
 "eslint.autoFixOnSave": true,
 // 根据需求自定义你要检测的文件格式
  "eslint.validate": [
        "javascript",
        "javascriptreact",
      ],
 "editor.tabSize": 2，
 // 关闭vscode默认的格式化保存
 "editor.formatOnSave": false,

到这里，配置就完成了

git commit 的时候 代码自动格式化并检查代码规范
  1. 我用的是pre-commit, （你可以根据自己爱好选用其他的哈）
    插件地址 https://pre-commit.com/ 
npm i pre-commit --save-dev
  1. 然后在你的package.json 里面设置
// 先在你的 scripts 里面定义 eslint校验和修复命令
"scripts": {
    "lint": "eslint --ext .js --ext .jsx src",
    "lint-fix": "eslint --fix --ext .js --ext .jsx src"
  },
  // 然后再在你的package.json里面加入以下代码
  // 这里面值需要和你的scripts命令一一对应才能有效，如果还有其他命令直接在lint 命令后添加就行
  "pre-commit": "lint-fix lint"

如有不足之处，敬请各位大佬批评指正！
QQ 交流 2770723534

相关文章