VS code 保存會自動格式化淀衣。以前都是alt+shift+F格式化的寞埠,現(xiàn)在一保存就格式化。剛寫好的代碼劣砍,格式化之后就亂套了哮幢,特別是用了eslint之后運行項目各種報錯頻頻出現(xiàn)带膀。往往會添加一些并不是我們想要的補齊
一、常見的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
函數(shù)前缺少空格括號函數(shù)前有空格括號-
error
Newline required at end of file but not found eol-last
在文件末尾需要換行符橙垢,但在最后一個eol中找不到垛叨。這個錯誤很神奇代碼,必須在代碼結(jié)尾增加一個換行柜某,多一個換行空格都不行
因此我們需要將VS code 的某些格式化功能清除掉
二嗽元、Prettier - Code formatter 插件
中文意思是“漂亮的、機靈的”喂击,也是一個流行的代碼格式化工具的名稱剂癌,它能夠解析代碼,使用你自己設(shè)定的規(guī)則來重新打印出格式規(guī)范的代碼翰绊。
Prettier具有以下幾個有優(yōu)點:
1.可配置化
2.支持多種語言
3.集成多數(shù)的編輯器
4.簡潔的配置項
使用Prettier在code review時不需要再討論代碼樣式佩谷,節(jié)省了時間與精力旁壮。
三、配置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",
//函數(shù)前加空格
"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
}
},
}
這樣基礎(chǔ)的配置就完了谐檀,格式化快捷鍵依舊可以使用抡谐,不會默認加上分號(;),字符串雙引號等桐猬。