VS code 保存会自动格式化。以前都是alt+shift+F格式化的,现在一保存就格式化。刚写好的代码,格式化之后就乱套了,特别是用了eslint之后运行项目各种报错频频出现。往往会添加一些并不是我们想要的补齐
一、常见的eslint错误:
error
Strings must use singlequote quotes
字符串必须使用单引号error
Extra semicolon semi
额外分号半 (;)error
Trailing spaces not allowed no-trailing-spaces
不允许有尾随空格没有尾随空格error
Missing space before function parentheses space-before-function-paren
函数前缺少空格括号函数前有空格括号-
error
Newline required at end of file but not found eol-last
在文件末尾需要换行符,但在最后一个eol中找不到。这个错误很神奇代码,必须在代码结尾增加一个换行,多一个换行空格都不行
因此我们需要将VS code 的某些格式化功能清除掉
二、Prettier - Code formatter 插件
中文意思是“漂亮的、机灵的”,也是一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。
Prettier具有以下几个有优点:
1.可配置化
2.支持多种语言
3.集成多数的编辑器
4.简洁的配置项
使用Prettier在code review时不需要再讨论代码样式,节省了时间与精力。
三、配置settings.json文件
{
"files.autoSave": "afterDelay",
"liveServer.settings.CustomBrowser": "chrome",
// #每次保存的时候自动格式化
"editor.formatOnSave": false,
"html.format.indentInnerHtml": true,
"html.format.indentHandlebars": true,
"eslint.format.enable": true,
"prettier.requirePragma": true,
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
//分号
"prettier.semi": false,
//单引号包裹字符串
"prettier.singleQuote": true,
//html格式化依赖 默认为none
"vetur.format.defaultFormatter.html": "js-beautify-html",
//函数前加空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
//没有下边这个 上边不生效
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 禁止标签属性换行
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
}
这样基础的配置就完了,格式化快捷键依旧可以使用,不会默认加上分号(;),字符串双引号等。