配置prettier和eslint

保证vscode安装了这些插件

安装相关依赖

yarn add -D prettier eslint

在代码格式化时采用Perttier规则，而我们代码校验使用的是ESLint，如果同一个规则配置不一致，往往就会出现冲突问题；

比如：字符串单、双引号的配置，eslint后把字符串变成单引号，更新文件代码过后，重新保存（Prettier）又自动格式化后变成双引号，导致代码校验异常。

eslint和prettier冲突的解决方案

• 解决方案1： 两者配置文件部分配置修改成一致.
• 解决方案2： 安装相关插件（Prettier 和 ESLint 冲突解决方案 eslint-config-prettier eslint-plugin-prettier）
• eslint-config-prettier 禁用 eslint 冲突配置
• eslint-plugin-prettier Prettier先格式化 （默认是先eslint格式化，再Prettier格式化）

yarn add -D eslint-config-prettier eslint-plugin-prettier

初始化.eslintrc.json文件

npx eslint --init
如果全局安装了eslint (npm install -g eslint )了, 可以直接使用eslint --init

根据提示勾选即可：

安装完成的eslintrc.json文件

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "indent": ["error", "tab"],
    "linebreak-style": ["error", "windows"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

修改eslintrc.json优雅提示

比如引入某个包，但是没有安装也会提示出来，因此需要安装一个插件eslint-config-airbnb

官方网址：https://www.npmjs.com/package/eslint-config-airbnb

npx install-peerdeps --dev eslint-config-airbnb

接着修改eslintrc.json文件

更多规则：https://eslint.bootcss.com/docs/rules/

  "extends": ["airbnb", "prettier", "plugin:react/recommended"],
  "plugins": ["prettier", "react"],

新建.prettierrc文件

更多规则：https://www.prettier.cn/docs/options.html

{
  "singleQuote": false,
  "endOfLine": "lf"
}

让提示更细致

给eslintrc.json追加rules, "prettier/prettier": "error",

最终两个文件的所有配置

// eslint
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["airbnb", "prettier", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["prettier", "react"],
  "rules": {
    "prettier/prettier": "error",
    "indent": ["off", "tab"],
    "linebreak-style": ["off", "windows"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}
===============================================================================
// prettier
{
  "singleQuote": false,
  "endOfLine": "lf"
}

配置stylelint

首先需要安装vscode的stylelint插件

安装相关的依赖

yarn add -D stylelint stylelint-config-stardand stylelint-config-prettier stylelint-order  

- stylelint-config-prettier解决和prettier冲突
- stylelint-order 排序css属性

新建.stylelint.json文件

stylelint相关规则: http://stylelint.docschina.org/user-guide/rules/

{
  "plugins": ["stylelint-order"],
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "rules": {
    "property-no-unknown": true,
    "comment-no-empty": [
      true,
      {
        "message": "禁止空注释"
      }
    ],
    "order/properties-order": [xxxxx]
}

查看一下效果

vscode保存自动修复

vscode编辑器, 往setting.json添加配置

"editor.codeActionsOnSave": {
	"source.fixAll.stylelint": true,
	"source.fixAll.eslint": true
},