時間:2021.6.3
vscode使用eslint+vetur+Prettier - Code formatter格式化代碼
//版本号,
vscode:v1.56.2
eslint:v2.1.20
vetur:v0.33.1
Prettier - Code formatter:v6.4.0
格式化配置
{
//配置檔案圖示庫
"workbench.iconTheme": "vscode-great-icons",
// vscode預設啟用了根據檔案類型自動設定tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 4,
// 110 列後換行
"editor.wordWrapColumn": 110,
// #每次儲存的時候自動格式化
"editor.formatOnSave": true,
// #每次儲存的時候将代碼按eslint格式進行修複
"editor.codeActionsOnSave": {
"source.fixAll": true
},
//eslint 檢測檔案類型
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"],
"prettier.printWidth": 110,
"prettier.tabWidth": 4,
//是否在每行末尾添加分号
"prettier.semi": false,
//如果為 true,則将多行jsx元素的 > 放在最後一行的末尾,而不是單獨放在下一行
"prettier.jsxBracketSameLine": true,
//如果為 true,将使用單引号而不是雙引号
"prettier.singleQuote": true,
//預設使用esbenp.prettier-vscode規則格式化檔案
"editor.defaultFormatter": "esbenp.prettier-vscode",
//.vue檔案使用vetur格式化,
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
//vetur格式化采用js-beautify-html方式
"vetur.format.defaultFormatter.html": "js-beautify-html"
"vetur.format.options.tabSize": 4,
//vetur格式化配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned", //可以設定為“force-aligned/auto”,效果會不一樣
"wrap_line_length": 110,
"end_with_newline": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
//關閉快速查找
// "search.followSymlinks": false,
//關閉快速預覽
"editor.minimap.enabled": true,
//取消自動更新
"update.mode": "none",
"git.enableSmartCommit": true,
}
新版vs code 1.41.1 vetur+eslint+prettier格式化配置
{
"workbench.iconTheme": "vscode-great-icons",
// vscode預設啟用了根據檔案類型自動設定tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 4,
// #每次儲存的時候自動格式化
"editor.formatOnSave": true,
// #每次儲存的時候将代碼按eslint格式進行修複
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.validate": [ //開啟對.vue檔案中錯誤的檢查
"javascript",
"javascriptreact",
"html",
"vue",
],
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 130, // No line exceeds 100 characters
"wrapAttributes": false,
"sortAttributes": true,
"singleQuote": false // Prefer double quotes over single quotes
},
"prettier": {
"semi": false,
"singleQuote": true,
}
},
"vetur.format.options.tabSize": 4,
"eslint.alwaysShowStatus": true,
//關閉快速查找
"search.followSymlinks": false,
//關閉快速預覽
"editor.minimap.enabled": false,
//取消自動更新
"update.mode": "none",
"editor.quickSuggestions": {
"strings": true
},
"explorer.confirmDelete": false,
"prettier.tabWidth": 4,
//是否在每行末尾添加分号
"prettier.semi": false,
//如果為 true,将使用單引号而不是雙引号
"prettier.singleQuote": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
}
舊版vetur+eslint+prettier格式化配置
{
// vscode預設啟用了根據檔案類型自動設定tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 4,
// #每次儲存的時候自動格式化
"editor.formatOnSave": true,
// #每次儲存的時候将代碼按eslint格式進行修複
"eslint.autoFixOnSave": true,
"eslint.validate": [ //開啟對.vue檔案中錯誤的檢查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true,
},
{
"language": "vue",
"autoFix": true
}
],
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //屬性強制折行對齊
},
},
//縮進設定為4
"prettier.tabWidth": 4,
//去掉代碼結尾的分号指js
"prettier.semi": false,
"prettier.singleQuote": true,
"eslint.alwaysShowStatus": true,
//關閉快速查找
"search.followSymlinks": false,
//關閉快速預覽
"editor.minimap.enabled": false,
//取消自動更新
"update.mode": "none",
}