项目规范之eslint & prettier 【create-react-app-typescript】

创建typescript项目

npx create-react-app my-app --template typescript

vscode 设置

首选项–设置–settings.json，添加以下配置

 "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的格式化插件prettier
 "editor.formatOnType": true, // 输完一行后自动格式化
 "editor.formatOnSave": true, // 保存时格式化
 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
 "eslint.run": "onSave",
 "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescriptreact",
    "html",
    "vue"
  ],

安装依赖

eslint

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev

prettier

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

eslint 配置

• @typescript-eslint/parser：typescript 解析器，替换eslint 默认的解析器
• @typescript-eslint/eslint-plugin： typescript对应的eslint 规则插件
• eslint-plugin-react： react 对应的eslint规则插件
• 添加配置文件 .eslintrc.js （移除package.json中的eslint配置）和 .eslintignore

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  globals: {},
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended', // @eslint-plugin-react 的推荐规则
    'plugin:@typescript-eslint/recommended', // @typescript-eslint/eslint-plugin的推荐规则
    'plugin:import/typescript', // eslint-plugin-import 抛出导入等支持的规则
    'plugin:react-hooks/recommended', // eslint-plugin-react-hooks 的规则
    'plugin:prettier/recommended', // eslint-plugin-prettier 的推荐规则
  ],
  parser: '@typescript-eslint/parser', // 指定解析器
  parserOptions: {
    ecmaVersion: 6, // 允许解析那个版本的特性
    sourceType: 'module', // 允许使用 import
    ecmaFeatures: {
      jsx: true, // 允许对JSX进行解析
    },
  },
  rules: {},
  settings: {
    react: {
      version: 'detect', // 告诉eslint-plugin-react 自动检测 React的版本
    },
  },
};

.eslintignore

/.git
/.vscode
node_modules
build
public

prettier 配置

• eslint-config-prettier: 禁用eslint插件的格式化规则,防止规则冲突
• eslint-plugin-prettier： prettier 对应的eslint规则插件
• 添加配置文件 .prettierrc.js 和 .prettierignore

.prettierrc.js

module.exports = {
  semi: true,
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
  endOfLine: 'lf',
};

.prettierignore

 /.git
/.vscode
node_modules
build

脚本配置

package.json

"scripts": {
    "lint-fix": "eslint --fix --ext .ts,.tsx src", // 修复src目录下的ts,tsx文件
    "format": "prettier --w src/**/*.{ts,tsx,css,less} src/*.{ts,tsx,css,less}" // 格式化src目录下的ts,tsx，css,less文件
  },