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

向右看齐 2022-11-27 00:44 501阅读 0赞

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

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

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

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

![from clipboard][]

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

![from clipboard][from clipboard 1]

## 二、安装插件 ##

需要安装一下插件：

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

![from clipboard][from clipboard 2]

## 三、配置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文本编辑模式

![from clipboard][from clipboard 3]

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][https_www.lanhusoft.com_Article_762.html]

[from clipboard]: /images/20221124/8afc36e51f0346d0a5497edf795c4c0b.png
[from clipboard 1]: /images/20221124/844b657225714c5b806f592765cb5092.png
[from clipboard 2]: /images/20221124/f6eaefd99c9f4135a8d7ec66635ed42a.png
[from clipboard 3]: /images/20221124/64719ad3bb1240fbb0018d30a8df3784.png
[https_www.lanhusoft.com_Article_762.html]: https://www.lanhusoft.com/Article/762.html