vue/cli建立vue+typescript模板工程后，使用eslint+prettier进行格式化

2021年5月更新，由于团队代码维护人员不同组别，有心无力，格式化会经常出乱子，因此继续精简不再使用prettier，只约束一些基本的vscode格式与eslint规则。

使用vue cli脚手架初始化工程后，不使用prettier了。

===========================================================

editorconfig插件还是有必要用一下，统一缩进空格等。

.editorconfig

root = true
[*]
charset = utf-8
indent_style = s
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

.eslintrc 根据喜好在rules添加规则即可，我这个就是在默认standard规则添加了一条semi分号强制的规则。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    semi: ['error', 'always']
  }
};

npm run lint会自动修复大部分eslint错误。

常用的rules，根据需要添加

这些规则关闭可以避免大量的warning，当然有条件还是尽量不关闭规则来优化代码。

• "@typescript-eslint/explicit-module-boundary-types": "off",
• "@typescript-eslint/no-explicit-any": "off",
• "@typescript-eslint/no-unused-vars": 'off',
• "@typescript-eslint/no-non-null-assertion": 'off'

========================================================================

下面为以前的

今天才发现vue/cli已经是4.0的版本了，之前的格式化用tslint等乱七八糟的导致我现在都无从修改，大道至简，今天把vue/cli的格式化配置用简单的配置再捋清楚！

主要问题与变化

工程格式化在规范代码方面非常重要，并且自动格式化也省去了很多麻烦，但是由于现在格式化工具很多，比如html就有prethtml，prettier等好几种，尤其是vue+typescript工程中的ts，还有tslint与eslint的选择，但是目前tslint团队也已经建议都是用eslint规则了，这给我们省去了很多麻烦。因此我们就确定下主要思路：

1. 在使用vscode的前提下，安装eslint+prettier+vetur三个插件，再配合editorconfig插件。
2. 工程的规则验证统一使用eslint，格式化使用prettier与vetur。也就是说.html，.css，.js，.ts等文件都使用我们安装的插件prettier（esbenp.prettier-vscode），.vue文件中各种代码则使用vetur中的配置，template中的html使用prettyhtml，其他都用prettier即可。
3. setting.json文件使用workspace的而非user的，也就是工程根目录下会有.vscode文件夹，一定记得把.gitignore里的.vscode忽略删除掉，保证同事间协同工作下的格式化配置统一。

构建工程与配置

我们从工程构建开始，这里我现在强烈推荐使用vue ui打开图形化管理界面进行项目构建，方便快捷，毕竟黑框看多了眼睛疼，vue+typescript的工程建议所有选项都勾上即可，linter/formatter 选项选择eslint + Standard config,这里就用最常规的eslint standard标准来做验证，因为我觉得大多数人并不想耗费太多精力在规则的选择上，只要团队是统一的就好了，因此就选择最这个标准的了，这个规则不带分号更简洁一些。

.editorconfig配置

这个可以覆盖vscode默认的几个配置，主要用来约束缩进，空格。

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

.eslintrc.js配置

这里修改了脚手架默认的配置，添加了一行"space-before-function-paren": 0，因为eslint standard的规则要求函数名和括号中间要有一个空格，但是prettier并不支持这个配置，因此选择修改这个配置了。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "@vue/standard",
    "@vue/typescript/recommended"
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "space-before-function-paren": 0
  }
};

最重要的是'plugin:prettier/recommended'，这个是让eslint按照prettier的规则进行验证和修复。那么就要去对.prettierrc.js进行配置。

.prettierrc.js配置

这个配置是主要是约束除了vue文件之外的其他js，ts文件等，主要约束好分号单引号就行了，只要配合好eslint standard即可。

module.exports = {
  printWidth: 130,
  semi: false,
  singleQuote: true
}

eslint + prettier 自动验证格式化代码

配置好了上面三个文件，则可以修改workspace下的setting.json来让vscode具备保存文件时候自动进行eslint+prettier+vetur的自动修复。

{
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 160
    },
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "printWidth": 130
    }
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

总结

这下工程相比以前少了tslint的配置文件和其他配置项，简化配置我觉得是很重要的，因此能简化插件简化配置就简化，这样我们的工程就易配置。把重心放在技术本身而不是工具，希望下一代脚手架工程可以更加智能。

参考

1. ts工程配置
2. eslint airbnb