vscode vue 自动格式化代码及解决与eslint冲突问题

1.格式化代码保存自动修复

在vscode中打开设置中的setting.json

根据自己的需求加入相应的格式代码（以下是我加入的）：

{
"terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
},
"prettier": {
"singleQuote": true,
"semi": false
}
},
// VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always", // required to work with
// 在react的jsx中添加对emmet的支持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact"
},
"files.associations": {
"*.tpl": "html",
"*.vue": "vue",
"*.css": "css"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持，比如vue后缀文件按照html文件来进行emmet扩写
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
// xml类型文件默认都是单引号，开启对非单引号的emmet识别
"xml": {
"attr_quotes": "single"
}
},
"workbench.editor.enablePreview": true, // 默认根据文件类型预测空格数关闭
"files.autoSave": "onWindowChange",
// 细节,配置gitlen中git提交历史记录的信息显示情况
"gitlens.advanced.messages": {
"suppressFileNotUnderSourceControlWarning": true,
"suppressUpdateNotice": true
},
"editor.renderControlCharacters": true, // 控制器是否显示控制字符
"editor.renderWhitespace": "all", // 在空白字符上显示符号的方式
// eslint能够识别的文件后缀类型
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
// #去掉代码结尾的分号
"prettier.semi": true,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"explorer.confirmDragAndDrop": false,
"editor.formatOnPaste": false,
"editor.formatOnType": false,
"editor.fontSize": 16,
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// git是否启用自动拉取
"git.autofetch": true,
"search.showLineNumbers": true,
"editor.suggestSelection": "first",
"javascript.updateImportsOnFileMove.enabled": "always",
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"terminal.integrated.rendererType": "dom",
"java.errors.incompleteClasspath.severity": "ignore",
"gitlens.gitCommands.skipConfirmations": [
"fetch:command",
"switch:command"
],
"gitlens.gitCommands.closeOnFocusOut": true,
"search.useGlobalIgnoreFiles": true,
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"fileheader.Author": "duyan",
"fileheader.LastModifiedBy": "duyan",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"javascript.format.insertSpaceAfterConstructor": false // 两个选择器中是否换行
}

2.eslint格式取消

打开项目中的webpack.base.conf.js，将图上红框部分去掉再重新启动项目即可。

3.vue项目中vuter格式化和eslint冲突问题解决

如果要同时适配两种方式的代码格式化，需要解决解决以下问题：
（1）解决单双引号问题
解决：修改setting.json配置

"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
},

（2）保存后后台报错Missing space before function parentheses 函数后跟括号之间的空格问题
解决： 找到.eslintrc.js文件 在其中配置
rules: {
//函数之前的空格数–根据vuter格式化来设置多少

"rules": {
'generator-star-spacing':'off',
'no-debugger': process.env.NODE_ENV === 'production'?'error':'off',
'space-before-function-paren': ['error', 'never'],
"quotes": [1, "single"], //引号类型 `` "" ''
"space-before-function-paren": 0,
"no-console":"off"
}

• 点赞
• 收藏
• 分享
• 文章举报