在 Vue+TypeScript 項目中，如何配置 ESLint 和 Prettier

在接手一些老項目的時候，最讓人頭疼的就是代碼格式化不統一的問題，控制台滿屏 eslint 警告，簡直是要逼死強迫症的節奏。

如果是開啟一個新的Vue項目，我一定會選用 Vue Cli + TypeScript + ESLint + Prettier 的組合，這個配置有以下好處：

• TypeScript 使我們的代碼更規范
• ESLint + Prettier 可以統一團隊代碼格式化，並且保存時自動進行格式修正

代碼地址

vue-ts

創建新項目

vue create vue-ts

注意這里需要勾選 ESLint + Prettier，我試過勾選 TSLint，但是發現 TSLint 無法實現代碼自動格式化，只能提供很多很多的警告信息。

后面要選擇 Lint on save 和 In decicated config files

修改.eslintrc.js

規則可以自己配置，我主要修改了extends：

• @typescript-eslint/parser：ESLint的解析器，用於解析TypeScript，從而檢查和規范TypeScript代碼。
• @vue/prettier/@typescript-eslint：使得@typescript-eslint中的樣式規范失效，遵循prettier中的樣式規范，需要放在最后一項。
• extends：代表你啟動哪些lint選項，如果多個規則直接有沖突的話，extends后面的選項會覆蓋前面的。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/prettier',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    parser: "@typescript-eslint/parser"
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "prefer-const": 'off'
  }
};

在根目錄添加 .prettierrc.js

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  semi: true,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: true
};

然后啟動/重啟項目，就可以在保存代碼時按照你項目里配置的格式化規則進行自動格式化了。

附上我的 vscode 配置

    {
	"prettier.semi": false,
	"prettier.jsxSingleQuote": true,
	"prettier.singleQuote": true,
	"prettier.proseWrap": "never",
	"prettier.printWidth": 180,
	"html.format.maxPreserveNewLines": 1,
	"html.format.wrapAttributes": "force",
	"prettier.eslintIntegration": true,
	"prettier.jsxBracketSameLine": true,
	"[javascript]": {
		"editor.defaultFormatter": "vscode.typescript-language-features"
	},
	"editor.tabSize": 2,
	"prettier.useTabs": true,
	"eslint.options": {
		"extensions": [".js", ".vue", ".ts", ".tsx"]
	},
	"[jsonc]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"eslint.run": "onSave",
	"javascript.validate.enable": false,
	"editor.wordWrap": "wordWrapColumn",
	"files.autoSave": "afterDelay",
	"[vue]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"[typescript]": {
		"editor.defaultFormatter": "vscode.typescript-language-features"
	},
	"tslint.run": "onSave",
	"eslint.format.enable": true,
	"vetur.format.defaultFormatter.html": "prettyhtml",
	"vetur.format.defaultFormatter.js": "prettier",
	"vetur.format.defaultFormatterOptions": {
		"prettier": {
			"singleQuote": true,
			"semi": false,
			"eslintIntegration": true
		}
	},
	"javascript.implicitProjectConfig.checkJs": true,
    }