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

今天才发现vue/cli已经是4.0的版本了，赶在vue源码发布v3之际再折腾下这个脚手架，之前的格式化用tslint等乱七八糟的导致我现在都无从修改，大道至简，今天把vue/cli的格式化配置用简单的配置再捋清楚！

主要问题与变化

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

在使用vscode的前提下，安装eslint+prettier+vetur三个插件
工程的格式化与规则验证统一使用eslint+prettier。也就是说html，css，js，ts等都使用prettier。
setting.json文件使用workspace的而非user的，也就是工程根目录下会有.vscode文件夹，一定记得把.gitignore里的.vscode忽略删除掉，保证同事间协同工作下的格式化配置统一。

构建工程与配置

我们从工程构建开始，这里我现在强烈推荐使用vue ui打开图形化管理界面进行项目构建，方便快捷，毕竟黑框看多了眼睛疼，vue+typescript的工程建议所有选项都勾上即可，linter/formatter 选项要选择eslint+prettier！

.eslintrc.js配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential", 
    "@vue/prettier", 
    "@vue/typescript", 
    'plugin:prettier/recommended', // add prettier-eslint plugin which will uses the `.prettierrc.js` config
  ],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
  },
  parserOptions: {
    parser: "@typescript-eslint/parser",
    sourceType: 'module', // allow the use of imports statements
    ecmaVersion: 2018, // allow the parsing of modern ecmascript
  },
  overrides: [
    {
      files: ["**/__tests__/*.{j,t}s?(x)"],
      env: {
        jest: true
      }
    }
  ]
};

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

.prettierrc.js配置

module.exports = {
    printWidth: 120,
    tabWidth: 2,
    tabs: false,
    semi: true,
    singleQuote: true,
    quoteProps: 'as-needed',
    tailingComma: 'all',
    bracketSpacing: true,
    jsxBracketSameLine: true,
    arrowParens: 'always',
    htmlWhitespaceSensitivity: 'ignore',
};

需要注意的是jsxBracketSameLine属性在vue的template中是无效的...导致template的html片段格式化可能不是很完美，只能用htmlWhitespaceSensitivity: 'ignore',做权宜之计，具体可以参考5844，5377两个issues，目前好像官方还没回复解决。不过我没什么强迫症统一就行...

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

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

{
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "vetur.format.defaultFormatter.html": "prettier",
}

记得html默认是prettyhtml，因此这里修改为prettier。

总结

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

参考

ts工程配置
eslint airbnb