react typescript项目使用 eslint airbnb检测和 prettier格式化

react 项目使用typescript语言，配置eslint(代码规范) airbnb(规范风格) prettier(美化)。

vscode或者sublime安装扩展

安装扩展eslint和prettier。

在vscode 配置配置添加，保存时会自动fix
"editor.codeActionsOnSave": {
        "source.fixAll": true
    },

yarn安装依赖

1. 全局安装eslint和prettier：yarn add global eslint prettier
2. 项目根目录安装：yarn add eslint prettier airbnb

配置eslint

在项目根目录：sudo eslint --init，会提示选择的风格如下图，eslint版本不一样选择风格有差异，成功后在根目录会生成一个.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

配置prettier

1. 安装依赖 yarn add eslint-config-prettier prettier
2. 在项目根目录新建文件.prettierrc

{
  "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为8
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

3. 修改.eslintrc.js文件

 extends: [
    'prettier', // 添加prettier
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
  ],

配置airbnb

1. 安装依赖：yarn add eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import
2. 修改.eslintrc.js文件，查看airbnb规则

 extends: [
    'eslint:recommended',
    'airbnb', // 添加prettier
    'prettier',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
  ],
  // 添加settings 因为react 使用typescript文件为.tsx
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.mjs', '.js', '.json', '.tsx'],
      },
    },
    'import/extensions': ['.js', '.mjs', '.jsx', '.tsx'],
  },
  
  // 修改rules规则
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.tsx'] }], // 在文件写jsx代码
    'import/extensions': [ // import 导入规则
      'error',
      'ignorePackages',
      {
        js: 'never',
        mjs: 'never',
        jsx: 'never',
        tsx: 'never',
      },
    ],
   }

在package.json中添加

"scripts": {
    ...
    "lint": "eslint --ext --fix .js,.tsx src", // 添加
    "fix": "npm run lint" // 添加
  },