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規則了，這給咱們省去了不少麻煩。所以咱們就肯定下主要思路：

1. 在使用vscode的前提下，安裝eslint+prettier+vetur三個插件
2. 工程的格式化與規則驗證統一使用eslint+prettier。也就是說html，css，js，ts等都使用prettier。
3. 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的配置文件和其餘配置項，簡化配置我以爲是很重要的，所以能少用插件就少用，即便能夠犧牲一部分功能，這樣咱們的工程就易配置。把重心放在技術自己而不是工具，但願下一代腳手架工程能夠更加智能。

參考

1. ts工程配置
2. eslint airbnb