现在没有前后端分离的开发模式都不好意思跟同行交流。前后端分离的好处这里就不再赘述了。
本司开发的系统是基于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":"es",
"lib":[
"es",
"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'sStylusSupremacy插件
"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
转载：/Article/762.html
