vscode如何配置ts的lint，如何配置才能让eslint和prettier不冲
突⼀键。。。
最近在使⽤ts，发觉tslint在vscode上使⽤很不⽅便，不如eslint⼀键格式化⾼效，就想着能不能配置下vscode让其像写js⼀样爽
这篇⽂章主要解决2个问题，第⼀个是如何让vscode使⽤ts的lint，第⼆个是如何配置才能让eslint和prettier这2个代码格式化的vscode插件不互相冲突
vscode使⽤t s的lint
⾸先ts的lint已经不⽤tslint了，这个东东官⽅已经说不维护了，转过来做了个typescript-eslint这个eslint的插件
官⽅⽂档
如果是⼀个⼲净的项⽬，按⽂档来肯定没有问题，为了写的更爽，提⽰更智能还是建议你继续往下读
搭配t ypescript-eslint做⼀个更⾼效的配置
⽹上写的vscode配置eslint和prettier达到⼀键格式化的⽂章很多，个⼈觉得都差不多，⽽且⽂章⾥很多设置都已经过时了
我直接贴⽬前较新的写法，注释也⽐较清楚
{
// 重新设定tabsize
"editor.tabSize": 4,
"prettier.tabWidth": 4, // 缩进字节数
// #每次保存的时候⾃动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进⾏修复 ,"eslint.autoFixOnSave": true 这个已经过时了
"deActionsOnSave": {
"source.fixAll": true
},
// 添加 vue,ts ⽀持，官⽅是不推荐⽤这个，但是你为了是ts⽂件在vscode⾃动提⽰⽽不是⽂件编译才提⽰就必须加这个
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript"
{
"language": "vue",
"autoFix": true
}
],
//  #默认是true加上分号，false是在有些容易出问题的地⽅（ASI failures）⾸部加分号
//  详细请看prettier.io/docs/en/rationale.html#semicolons
"prettier.semi": false,
//  #使⽤单引号替代双引号，不⽣效就是eslint做了限制
"prettier.singleQuote": false,
//  #让函数(名)和后⾯的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"able": 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,
"dererType": "dom",
"Level": 0,
"vscode_vibrancy.opacity": -1,
"vscode_vibrancy.theme": "Default Dark",
"glassit.alpha": 220,
"pe": "acrylic",
"search.followSymlinks": false,
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.detectIndentation": false,
"vetur.format.options.tabSize": 4,
}
这是vscode配置的代码，还需要.eslintrc.js配合使⽤
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
官⽅⽂档：
使⽤vscode来开发vue的程序员肯定都安装了它的，但是它有哪些⽤，之前我也是看很多⽂章都推荐安装那就安了再说，这次为了兼容ts看了下官⽅⽂档讲下个⼈见解
它功能有语法⾼亮，格式化，代码检测，代码⽚段，还有些我不清楚不敢瞎说怕被喷的
语法⾼亮，代码⽚段就不说了，⼀听就懂，代码检测是指vscode能在不编译⽂件的情况下直接检测以vue结尾的⽂件，它⾃动安装了⼀些检测点⽐如你vue的data要⽤函数写法，如果你没⽤函数它就会配合eslint-plugin-vue给出提⽰
格式化是我这⼏天着重研究的就具体讲⼀下
格式化给我感觉是vetur它本⾝没有格式化功能，他是把别的格式化插件封装了⼀下，你可以通过配置选择你格式化时使⽤的插件
在这⾥我使⽤了prettier-eslint作为格式化⼯具，这个库要npm⼀下才能使⽤，他的功能是先使⽤prettier格式化代码风格再⽤eslint验证⼀下代码的语法然后再进⼀步根据eslint格式化你代码
vscode代码规范html使⽤的是js-beautify-html，这个使⽤⽅式⽹上很多，你也看下我上⾯vscode配置⽂件是如何配置的
2 prettier，eslint
prettier主要功能是⽤来做代码风格格式化的，eslint主要是做语法验证的，这2个⼀开始我也不懂，⽽且有部分像是否加分号，字符串使⽤单引号还是双引号这些他们都可以配置
我是这么理解的eslint是给你指出问题的，它告诉你你的代码有哪⾥不规范然后让你⾃⼰改（它可以帮你改⼀⼩部分），⽽prettier是你给它指定规则，然后它帮你完成格式化，它只有⼀个功能就是根据你的规则格式化代码，
因为eslint有⼀部分代码它也可以帮你格式化，并且使⽤了prettier-eslint后它的权重⽐prettier⾼，所以你给prettier设置的规则不⽣效，就要考虑是不是eslint影响了它
eslint的vscode插件使⽤⽂档在这⾥：
值得注意的是⽹上很多⽂章说
// #让prettier使⽤eslint的代码格式进⾏校验
"prettier.eslintIntegration": true,
这个⽬前可以看到vscode提⽰说prettier已经废弃这种写法了，⽬前改如何使⽤你可以看下官⽅⽂档（我上⾯已经配好了的）
有任何不对的地⽅欢迎交流指正！