最近在使用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
"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 typescript-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个一开始我也不懂，而且有部分像是否加分号，字符串使用单引号还是双引号这些他们都可以配置