在cra项目中使用eslint规范代码

95 阅读1分钟

需修改vscode设置:允许eslint格式化并修改代码,说明eslint支持的文件类型:

{
    "eslint.format.enable": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ]
}

添加pluggin(prettier)

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

,添加配置文件.eslintrc.json

{
    "extends": [
      "react-app",
      "eslint:recommended",
       "plugin:prettier/recommended"
    ],//引用默认配置,如果rules配置全了不用这个也ok
    "plugins": ["@typescript-eslint", "prettier"],//插件
    "rules": {
      "@typescript-eslint/no-unused-vars": "warn",
      "react/prop-types": "off",
      "prettier/prettier": "error"
    }
  }

,配置prettierrc

{
     "semi": false, 
     "singleQuote": false, 
     "trailingComma": "none", 
     "endOfLine": "auto",//换行符格式 
     "quoteProps": "preserve" ,
      "quotes": "auto",
      "printWidth": 80,
      "tabWidth": 2
}

如果报错可以看看版本问题