VSCode代碼格式化設(shè)置
安裝插件
ESLint纹因、Prettier-code formatter纹安、Vetur
插件.png
一涮帘、配置setting.json文件
// tab 大小為2個(gè)空格
"editor.tabSize": 2,
// 100 列后換行
"editor.wordWrapColumn": 100,
// 保存時(shí)格式化
"editor.formatOnSave": true,
// 開(kāi)啟 vscode 文件路徑導(dǎo)航
"breadcrumbs.enabled": true,
// prettier 設(shè)置強(qiáng)制單引號(hào)
"prettier.singleQuote": true,
// prettier 設(shè)置語(yǔ)句末尾加分號(hào)
"prettier.semi": false,
// 選擇 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettier",
// 顯示 markdown 中英文切換時(shí)產(chǎn)生的特殊字符
"editor.renderControlCharacters": true,
// 讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
// vetur 的自定義設(shè)置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
},
// Ctrl + Shift + F 快捷鍵設(shè)置（依照vetur格式化代碼）
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
注意
"vetur.format.defaultFormatter.html": "prettyhtml", //默認(rèn)
"vetur.format.defaultFormatter.html": "prettier", //全語(yǔ)言格式化
Vetur對(duì)于html文件默認(rèn)使用的是prettyhtml召边，但是由于prettier也可以支持html的格式化粪滤，所以我覺(jué)得統(tǒng)一使用prettier對(duì)全語(yǔ)言的格式化是比較簡(jiǎn)潔的官套。
二盛正、.eslintrc.js文件rules配置
module.exports = {
rules: {
"no-console": "off",
"no-debugger": "off",
"space-before-function-paren": ["error", "never"],
// 是否逗號(hào)結(jié)尾 never: 從不
"comma-dangle": [0, "never"],
// 是否分號(hào)結(jié)尾
semi: [0, "never"],
// 單引號(hào)還是雙引號(hào)字符串
quotes: [0, "single"],
// 方法前是否要一個(gè)空格 always: 總是要
"space-before-function-paren": [0, "never"],
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/camelcase": "off",
"@typescript-eslint/no-this-alias": "off"
}
};
