用vue手脚架生成项目后,修改.Vue文件后,直接保存编译报一大堆错误,解决办法如下:
显示错误截图如下:
因为直接用vue脚手架初始化创建项目,会选择是否选用eslint语法检查,选择了之后,修改.vue文件报以上截图错误
解决办法如下:
- 直接重新初始化关掉eslint语法,但是这样子做的话,有点麻烦。
- 直接在文件根目录下的
.eslintrc.j
s文件加入如下代码,直接忽略掉就行了rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-trailing-spaces': 'off', 'indent': 'off', 'spaced-comment': 'off', 'no-trailing-spaces': 'off', 'no-new': 'off', 'key-spacing': 'off', 'comma-dangle': 'off', 'eol-last': 'off', 'quotes': 'off', 'semi': 'off', 'keyword-spacing': 'off', 'space-before-blocks': 'off', 'comma-spacing': 'off', 'space-before-function-paren': 'off', 'space-infix-ops': 'off', 'no-multiple-empty-lines': 'off', 'block-spacing': 'off', 'padded-blocks': 'off', 'arrow-spacing': 'off', 'no-sequences': 'off', 'no-unused-expressions': 'off', 'no-multi-spaces': 'off', 'no-unused-vars': 'off', 'camelcase ': 'off', }
具体截图如下:
关于开发Vue项目格式化问题配置
大家用VSCode开发vue项目格式化的时候总是有一些行尾加;,空格等问题,其实下载插件直接解决就OK了,给你一个清爽的代码体验,具体步骤如下:
- 下载插件vetur(开发vue必备)、prettier(代码洁癖必备)、beautify
- Ctrl+Shift+p 找到用户设置 -----> setting.json中设置
- 直接把下面的json格式代码复制即可
{
"files.autoSave": "off",
//是让vue后缀的文件就当作vue文件格式来解析
"files.associations": {
"*.vue": "vue"
},
//eslint代码格式化相关配置
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 重新设定tabsize
"editor.tabSize": 2,
// 保存自动化
"editor.formatOnSave": true,
// 保存时自动fix
"eslint.autoFixOnSave": true,
"eslint.run": "onSave",
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 使用插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
//默认浏览器为chrome浏览器打开
"open-in-browser.default": "chrome",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "One Dark Pro",
"code-runner.runInTerminal": true,
"vsicons.dontShowNewVersionMessage": true,
// "[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// },
"workbench.activityBar.visible": true,
// "workbench.colorCustomizations": {
// // 设置guide线高亮颜色
// "editorIndentGuide.activeBackground": "#e82d6b"
// },
"workbench.sideBar.location": "left",
"powermode.enabled": true, //是否开启
"powermode.enableShake": false,
"liveServer.settings.donotShowInfoMsg": true,
"previewServer.port": 9030, //动画效果
//git配置文件,路径是git.exe绝对路径
"git:path": "E:\\software\\Git-2.21.0\\Git\\bin\\git.exe",
"git.autofetch": true,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"svn.enableProposedApi": "none",
//敲代码的爆炸效果的设置
"powermode.presets": "exploding-rift",
"powermode.comboThreshold": 1,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"editor.mouseWheelZoom": true,
"terminal.integrated.rendererType": "dom",
"explorer.confirmDragAndDrop": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"javascript.implicitProjectConfig.experimentalDecorators": true,
"explorer.confirmDelete": false,
// Bracket-Pair-Colorizer-2括号着色自定义
"bracket-pair-colorizer-2.activeScopeCSS": [
"borderStyle : solid",
"borderWidth : 2px",
"borderColor : {#f22f75}",
"opacity: 1"
],
// 在装订线中显示活动范围括号
"bracket-pair-colorizer-2.showBracketsInGutter": true,
}