vsCode中配置EsLint,使代码保存后根据项目中.eslint配置文件自动格式化代码;
安装下载所需vs code插件
- HTML Snippets(html代码补全)
- ESLint(代码风格检查与规范)
- vetur (语法高亮)
- Prettier - Code formatter (只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown)
修改vsCode配置
- 打开vsCode:文件-首选项-设置,选择在setting.json文件中修改配置
setting.json配置代码
{
// 重新设定tabsize
"editor.tabSize": 2,
// 文件关联
"files.associations": {
"*.vue": "vue",
"*.js": "javascript",
"*.ejs": "html"
},
// #每次保存的时候自动格式化
"eslint.autoFixOnSave": true,
// eslint配置项
"eslint.options": {
"configFile": "./.eslintrc.js",
"extensions": [
"html",
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
// 添加 vue 支持
{
"language": "vue",
"autoFix": true
},
// 添加 html 支持
{
"language": "html",
"autoFix": true
}
],
// 检索过滤
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"extensions.ignoreRecommendations": false,
"explorer.confirmDelete": false,
"git.confirmSync": false,
"window.zoomLevel": 0,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
}