vs code保存自动格式化代码及eslint/tslint修复-太爽（丝滑般的感觉）

现在没有前后端分离的开发模式都不好意思跟同行交流。前后端分离的好处这里就不再赘述了。

本司开发的系统是基于Angular（ng zorro），TypeScript，后台采用Spring Boot。写前端本人独爱vs code，配合vs code的一些插件，写代码简直那个爽（丝滑般的感觉）。

vs code保存自动格式化代码及eslint/tslint修复，是不是能找到宇宙最强大，最好用的IDE Visual Studio的感觉？

下面我分享一下我的vs code配置。

一、vs code版本Version: 1.45.0 (user setup)

二、安装插件

需要安装一下插件：

ESLint
TSLint
Prettier - Code formatter
Manta's Stylus Supremacy
language-stylus
Vetur

三、配置prettier

Prettier是一个能够完全统一你和同事代码风格的利器,并且统一的代码风格能保证代码的可读性。

在项目根目录增加文件.prettierrc

{

"printWidth": 120,

"semi": false,

"singleQuote": true

}

四、配置tsconfig

tsconfig.json：

{

"compileOnSave": false,

"compilerOptions": {

// "baseUrl": "./",

// 添加路径相关

"baseUrl": "src",

"paths": {

"@app/*": ["app/*"]

"outDir": "./dist/out-tsc",

"sourceMap": true,

"declaration": false,

"downlevelIteration": true,

"experimentalDecorators": true,

"module": "esnext",

"moduleResolution": "node",

"importHelpers": true,

"target": "es2015",

"lib": [

"es2018",

"dom"

]

"angularCompilerOptions": {

"fullTemplateTypeCheck": true,

"strictInjectionParameters": true

}

五、配置tslint

因为使用是typescript，所以我当然要用tslint。

添加文件tslint.json：

{

"extends": "tslint:recommended",

"rules": {

"array-type": false,

"arrow-parens": false,

"deprecation": {

"severity": "warning"

"component-class-suffix": true,

"contextual-lifecycle": true,

"directive-class-suffix": true,

"directive-selector": [

true,

"attribute",

"app",

"camelCase"

"component-selector": [

true,

"element",

"app",

"kebab-case"

"import-blacklist": [

true,

"rxjs/Rx"

"interface-name": false,

"max-classes-per-file": false,

"max-line-length": [

true,

140

"member-access": false,

"member-ordering": [

true,

{

"order": [

"static-field",

"instance-field",

"static-method",

"instance-method"

]

}

"no-consecutive-blank-lines": false,

"no-console": [

true,

"debug",

"info",

"time",

"timeEnd",

"trace"

"no-empty": false,

"no-inferrable-types": [

true,

"ignore-params"

"no-non-null-assertion": false,

"no-redundant-jsdoc": true,

"no-switch-case-fall-through": true,

"no-use-before-declare": true,

"no-var-requires": false,

"object-literal-key-quotes": [

true,

"as-needed"

"object-literal-sort-keys": false,

"ordered-imports": false,

"quotemark": [

true,

"single"

"trailing-comma": false,

"no-conflicting-lifecycle": true,

"no-host-metadata-property": true,

"no-input-rename": true,

"no-inputs-metadata-property": true,

"no-output-native": true,

"no-output-on-prefix": true,

"no-output-rename": true,

"no-outputs-metadata-property": true,

"template-banana-in-box": true,

"template-no-negated-async": true,

"use-lifecycle-interface": true,

"use-pipe-transform-interface": true

"rulesDirectory": [

"codelyzer"

]

}

vs全局设置

快捷键：ctrl+,

然后点右上角进入settings.json文本编辑模式

settings.json

{

"editor.wordWrap": "on",

"update.enableWindowsBackgroundUpdates": false,

"update.mode": "none",

"update.showReleaseNotes": false,

"window.zoomLevel": 0,

"typescript.updateImportsOnFileMove.enabled": "always",

"explorer.confirmDelete": false,

// #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F

"editor.formatOnSave": true,

//设置tab的缩进为2

"editor.tabSize": 2,

// #每次保存的时候将代码按eslint和tslint格式进行修复

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true,

"eslint.autoFixOnSave": false,

"source.fixAll.tslint": true

"eslint.run": "onSave",

// #让prettier使用eslint的代码格式进行校验

// vscode 更新后已经统一使用editor.codeActionsOnsave

// #代码结尾加分号为好

"prettier.semi": true,

// #使用带引号替代双引号

"prettier.singleQuote": true,

"prettier.tabWidth": 4,

// #让函数(名)和后面的括号之间加个空格

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

// #这个按用户自身习惯选择

"vetur.format.defaultFormatter.html": "js-beautify-html",

// #让vue中的js按"prettier"格式进行格式化

"vetur.format.defaultFormatter.js": "prettier",

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

// #vue组件中html代码格式化样式

"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样

"wrap_line_length": 200,

"end_with_newline": false,

"semi": false,

"singleQuote": true

"prettier": {

"semi": false,

"singleQuote": true

}

"[jsonc]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

// 格式化stylus, 需安装Manta's Stylus Supremacy插件

"stylusSupremacy.insertColons": false, // 是否插入冒号

"stylusSupremacy.insertSemicolons": false, // 是否插入分号

"stylusSupremacy.insertBraces": false, // 是否插入大括号

"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行

"stylusSupremacy.insertNewLineAroundBlocks": false,

"prettier.useTabs": true,

"files.autoSave": "off",

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"[json]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"diffEditor.ignoreTrimWhitespace": false,

"[html]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}, // 两个选择器中是否换行

//在vue文件里设置html关联

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

"explorer.confirmDragAndDrop": false,

"terminal.integrated.rendererType": "dom",

"files.associations": {

"*.ejs": "html",

"*.vue": "html"

"emmet.triggerExpansionOnTab": true,

"emmet.includeLanguages": {

"vue-html": "html",

"vue": "html"

"editor.accessibilitySupport": "on",

"[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}

六、最后效果

保存代码自动修复并格式代码，也不用每次想格式化代码要手动按

shift+alt+f

转载：https://www.lanhusoft.com/Article/762.html