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