eslint爱恨情仇

前言

eslint 的配置网上很多，就不啰嗦，本文主要讲一个 eslint 使用过程中遇到的问题

先了解一下 eslint 在哪里配置：

在 package.json 中eslintConfig字段配置
.eslintrc.*中配置

官网第一个例子

这是官网第一个例子，就是末尾分号与单引号的校验,然而这里面水很深

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

一般我们的配置都是单引号和不要末尾分号,然鹅在我们格式化的时候(Vue):

网上的解决方案：

{
  "prettier.tabWidth": 2,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur默认使用ts格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分号
      "singleQuote": true // 格式化以单引号为主
    }
}

我一股脑全部设置之后依然没有什么用，然后我打开 vscode 控制台发现每次格式化的时候并没有读取这个配置:

["INFO" - 11:21:05 AM] Prettier Options:
{
  "filepath": "/Users/zhuxiansheng/work/彩云h5项目/h5-agg-bagui/src/reverse-order/App.vue",
  "parser": "vue",
  "useTabs": false,
  "tabWidth": 2
}

这是哪里的配置呢？ .editorconfig 中的配置，但是它里面不能设置分号和引号这些，所以只能创建一个 .prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

好了，现在就可以与 eslint 一样地格式化了

另外，我猜测是.editorconfig 影响了 prettier 格式化，然后在配置文件中将 vue 删掉也能够完美解决这个问题

总结: vue 格式化时需要配置如下 json,并且在.editorconfig 删掉 vue 或者添加.prettierrc 文件单独配置当前文件的格式

{
  "prettier.tabWidth": 2,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur默认使用ts格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分号
      "singleQuote": true // 格式化以单引号为主
    }
}

原文来自于我的博客： missop.github.io/2020/03/21/…