安裝插件
prettier 代碼格式化工具
安裝后格式化代碼(alt + shift + f)的同時(shí)也可以自動(dòng)修復(fù)小問題。
配置文檔:官方文檔
配置方式:
- VSCode 全局配置：
settings.json - 項(xiàng)目特殊配置: 項(xiàng)目目錄下創(chuàng)建
.prettierrc
常用配置項(xiàng):
- eslintIntegration: 讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn), true
- stylelintIntegration: true
- tabWidth: tab 寬度, 2
- semi: 是否使用分號(hào)結(jié)尾, false
- trailingComma: 尾后是否加逗號(hào), es5 - 在ES5中有效的尾隨逗號(hào)
- singleQuote: 使用單眼號(hào)兵罢，true
ESLint 代碼檢查工具
Vetur: vue 相關(guān)工具
代碼語法高亮，快捷鍵
Vue 2 Snippets 快捷鍵
和 Vetur 功能有重復(fù)的地方孔庭，不過個(gè)人認(rèn)為這個(gè)好用點(diǎn)。
具體配置
VSCode 全局設(shè)置
VSCode settings.json 文件添加下面設(shè)置：
可能與你原來的設(shè)置有重復(fù)的項(xiàng)目材蛛，按照你自己需要選擇即可
"eslint.validate": [
"javascript",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": false
}
],
"eslint.autoFixOnSave": false,
"[css]": {
"editor.defaultFormatter": "MikeBovenlander.formate"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.eslintIntegration": true,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.disableLanguages": ["html"],
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.validation.template": false,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
項(xiàng)目中 ESLint 設(shè)置
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', '@vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'prettier/prettier': 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
};
項(xiàng)目依賴相關(guān)
"devDependencies": {
"@vue/cli-plugin-babel": "^3.6.0",
"@vue/cli-plugin-eslint": "^3.6.0",
"@vue/cli-service": "^3.6.0",
"@vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"lint-staged": "^8.1.5",
"vue-template-compiler": "^2.5.21"
}
版本號(hào)可能需要升級(jí)，創(chuàng)建于: 2019/4/19
