Recently the use of ts, found tslint used on vscode very convenient, as a key eslint efficient format, you can not think of the next configuration is vscode like to write js cool as
this article is mainly to solve two problems, the first is how to make vscode use lint ts, and the second is how to make eslint configuration and prettier these two codes formatted vscode plugin does not conflict with each other
vscode use of lint ts
First ts of lint has not tslint, and say this stuff officials have maintained, turned up to do a typescript-eslint this eslint plugin
official documentation https://github.com/typescript-eslint/typescript-eslint#getting -started
If it is a clean project, according to the document will have no problem, in order to write Gengshuang, suggesting more intelligent suggest you read on
With typescript-eslint do a more efficient configuration
Online writing vscode configuration eslint and prettier reached a key format of many articles, personally feel are similar, and in many settings articles are obsolete
me directly attached to the relatively new wording, the comment also clear
{
// 重新设定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,
}This is the code vscode configuration, but also with the use of .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 }]
}
}
You then need to manually npm following libraries
eslint-config-prettier @ typescript- eslint / parser @ typescript-eslint / eslint-plugin prettier-eslint
then you can normally use, but there is a small problem is not resolved, that is, as long as the configuration of the eslint ts verify the entire project will be carried out to verify ts, can not go js file js validation, verification ts ts files go
To know in the end what is your copy of some
If the above code allows you to develop normal, then I am very happy to be able to help you, but I want to talk about you a pass in the end is operating at doing, programmers can not just copy paste right, I generally speak at vetur prettier eslint typescript-eslint, in fact, I do not particularly understand ~
1 vetur
official document: https: //vuejs.github.io/vetur/setup.html
use vscode programmers to develop vue certainly have installed it, but what use it, before I was to see the article Guannameduo recommend installing it safe to say that this looked to be compatible ts under the official document speak at personal opinion
it features syntax highlighting, formatting, code detection, code snippets, and some I do not know can not talk nonsense fear of being sprayed
syntax highlighting, code snippets will not say, one to understand, code detection means vscode can be directly detected without compiling files end with a vue file, it automatically detects installed some point such as your vue of data written to use the function, you useless if it will function with eslint-plugin-vue prompt
to format these days is what I focus on research To talk about specific
format gave me the impression that it does not have vetur formatting functions, he is the other format plug-in packages for a moment, you can select the plug you use when formatting configure
here I use the prettier-eslint as a formatting tool, the library should look to use npm, his function is to use prettier style formatting code and then eslint verify the syntax of the code and then format your code is further based on eslint
html using js-beautify-html this way of using the internet a lot, you also look at how I vscode profile is configured above
2 prettier, eslint
prettier main function is used to do the code formatting style, eslint mainly to do syntax validation, which two first I did not understand, but some, like whether a semicolon, strings using single quotes or double quotes these they can be configured