最近在使用ts，發覺tslint在vscode上使用很不方便，不如eslint一鍵格式化高效，就想着能不能配置下vscode讓其像寫js一樣爽
這篇文章主要解決2個問題，第一個是如何讓vscode使用ts的lint，第二個是如何配置才能讓eslint和prettier這2個代碼格式化的vscode插件不互相沖突
vscode使用ts的lint
首先ts的lint已經不用tslint了，這個東東官方已經說不維護了，轉過來做了個typescript-eslint這個eslint的插件
官方文檔 https://github.com/typescript-eslint/typescript-eslint#getting-started
如果是一個干凈的項目，按文檔來肯定沒有問題，為了寫的更爽，提示更智能還是建議你繼續往下讀
搭配typescript-eslint 做一個更高效的配置
網上寫的vscode配置eslint和prettier達到一鍵格式化的文章很多，個人覺得都差不多，而且文章里很多設置都已經過時了
我直接貼目前較新的寫法，注釋也比較清楚
{
// 重新設定tabsize
"editor.tabSize": 4,
"prettier.tabWidth": 4, // 縮進字節數
// #每次保存的時候自動格式化
"editor.formatOnSave": true,
// #每次保存的時候將代碼按eslint格式進行修復 ,"eslint.autoFixOnSave": true 這個已經過時了
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 添加 vue,ts 支持，官方是不推薦用這個，但是你為了是ts文件在vscode自動提示而不是文件編譯才提示就必須加這個
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript"
{
"language": "vue",
"autoFix": true
}
],
// #默認是true加上分號，false是在有些容易出問題的地方（ASI failures）首部加分號
// 詳細請看https://prettier.io/docs/en/rationale.html#semicolons
"prettier.semi": false,
// #使用單引號替代雙引號,不生效就是eslint做了限制
"prettier.singleQuote": false,
// #讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.format.enable": false,
// #這個按用戶自身習慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進行格式化
// 如果是ts就使用prettier-eslint ，這個需要cpm
// 這里提示ts沒有eslint這個值。但是實測是生效的
"vetur.format.defaultFormatter.ts": "prettier-eslint",
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline",
"end_with_newline": false
// #vue組件中html代碼格式化樣式
}
},
"editor.fontSize": 16,
"terminal.integrated.rendererType": "dom",
"window.zoomLevel": 0,
"vscode_vibrancy.opacity": -1,
"vscode_vibrancy.theme": "Default Dark",
"glassit.alpha": 220,
"vscode_vibrancy.type": "acrylic",
"search.followSymlinks": false,
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.detectIndentation": false,
"vetur.format.options.tabSize": 4,
}
這是vscode配置的代碼，還需要.eslintrc.js配合使用
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:vue/essential',
'prettier'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaVersion: 2018,
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'no-console': 2,
'no-debugger': 2,
'semi-spacing': ['error', { before: true, after: true }],
quotes: ['error', 'single', { allowTemplateLiterals: true }]
}
}
然后需要手動npm以下庫
eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier-eslint
然后就能正常的使用了，但是還有個小問題沒有解決，就是eslint只要配置了ts驗證就會整個項目都進行ts驗證，不能js文件走js驗證，ts文件走ts驗證
了解下安裝的插件都有啥用
如果上面的代碼能讓你正常開發了，那么我很開心能幫助到你，但是我還想講一下你一通操作到底是在干啥，程序員不能只會復制黏貼對吧，我大致講下vetur prettier eslint ，其實我也也不是特別懂~
1 vetur
官方文檔：https://vuejs.github.io/vetur/setup.html
使用vscode來開發vue的程序員肯定都安裝了它的，但是它有哪些用，之前我也是看很多文章都推薦安裝那就安了再說，這次為了兼容ts看了下官方文檔講下個人見解
它功能有語法高亮，格式化，代碼檢測，代碼片段，還有些我不清楚不敢瞎說怕被噴的
語法高亮，代碼片段就不說了，一聽就懂，代碼檢測是指vscode能在不編譯文件的情況下直接檢測以vue結尾的文件，它自動安裝了一些檢測點比如你vue的data要用函數寫法，如果你沒用函數它就會配合eslint-plugin-vue給出提示
格式化是我這幾天着重研究的就具體講一下
格式化給我感覺是vetur它本身沒有格式化功能，他是把別的格式化插件封裝了一下，你可以通過配置選擇你格式化時使用的插件
在這里我使用了prettier-eslint作為格式化工具，這個庫要npm一下才能使用，他的功能是先使用prettier格式化代碼風格再用eslint驗證一下代碼的語法然后再進一步根據eslint格式化你代碼
html使用的是js-beautify-html，這個使用方式網上很多，你也看下我上面vscode配置文件是如何配置的
2 prettier，eslint
prettier主要功能是用來做代碼風格格式化的，eslint主要是做語法驗證的，這2個一開始我也不懂，而且有部分像是否加分號，字符串使用單引號還是雙引號這些他們都可以配置
我是這么理解的eslint是給你指出問題的，它告訴你你的代碼有哪里不規范然后讓你自己改（它可以幫你改一小部分），而prettier是你給它指定規則，然后它幫你完成格式化，它只有一個功能就是根據你的規則格式化代碼，
因為eslint有一部分代碼它也可以幫你格式化，並且使用了prettier-eslint后它的權重比prettier高，所以你給prettier設置的規則不生效，就要考慮是不是eslint影響了它
eslint的vscode插件使用文檔在這里：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
值得注意的是網上很多文章說
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
這個目前可以看到vscode提示說prettier已經廢棄這種寫法了，目前改如何使用你可以看下官方文檔（我上面已經配好了的）
https://prettier.io/docs/en/integrating-with-linters.html
有任何不對的地方歡迎交流指正！