vue项目中vscode安装eslint插件和错误自动修复(vue-cli2.0创建的项目)
一、这是使用vue cli2.0搭建的项目的配置方法
npm install -g vue-cli
vue init webpack my-pro
(一路按着”enter“就行)
1、查看自己的vue项目中是否有eslint组件
(1)是否有eslintrc.js该文件;
(2)查看webpack的配置文件:package.json中是否有以下配置
2.在visual studio code 中安装 eslint 插件和 vetur 插件
3.以上实现的是手动代码修复,如果到后期就不方便,以下是设置自动修复代码的操作:
打开:文件》首选项》设置》搜索 ”eslint“ 》点击用户设置,即如下图标:
将这里的”false“改为”true“,就可以正常编写代码了,ctr+s就自动将代码修复好了(如果不行,就重启一下visual studio code)
如果里面没有代码,只有{},则添加:
根目录下面创建一个文件.prettierrc.json (双引号变单引号,去掉分号)
{
"singleQuote": true,
"semi": false
}
{
"editor.wordWrap": "on",
"workbench.colorTheme": "Quiet Light",
"eslint.autoFixOnSave": true,
"explorer.confirmDragAndDrop": false,
"editor.detectIndentation": false,
"editor.tabSize": 2,
"vetur.format.defaultFormatter.js": "none",
"files.associations": {
"*.vue": "vue"
},
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"git.confirmSync": false,
"window.zoomLevel": 0,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"[vue]": {
"editor.defaultFormatter": "qiang014.vetur-e"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
}
二、vue-cli3.0创建的项目,改配置
{
"workbench.startupEditor": "newUntitledFile",
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
"editor.multiCursorModifier": "ctrlCmd",
"editor.snippetSuggestions": "top",
"editor.formatOnPaste": true,
"extensions.ignoreRecommendations": false,
"editor.fontSize": 15,
"editor.tabSize": 2,
"vetur.validation.template": false,
"workbench.activityBar.visible": true,
"workbench.colorTheme": "Eclipse",
"javascript.implicitProjectConfig.experimentalDecorators": true,
"[vue]": {},
"svn.enableProposedApi": "product",
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"terminal.integrated.rendererType": "dom"
}