vscode支持vue-cli3構(gòu)建的項目引入eslint代碼檢測+prettier代碼美化
-
vscode 安裝插件：
- Vetur
- prettier
- Eslint
-
禁用沖突的插件:
- Beautify
-
刪除package.json中默認eslint的配置
image.png
- 新建
.eslintrc.js文件挖胃，對eslint進行配置憔狞，我的配置如下
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
quotes: ['error', 'single'], //強制使用單引號
semi: ['error', 'never'], //強制不使用分號結(jié)尾
eqeqeq: ['error', 'always'], // 強制在任何情況下都使用 === 和 !==
'brace-style': ['error', '1tbs', { allowSingleLine: true }] //強制在代碼塊中使用一致的大括號風格
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
parser: 'babel-eslint'
}
}
- 新建
.prettierrc文件對代碼美化進行配置
{
"semi": false,
"singleQuote": true,
"printWidth": 80,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "none",
"jsxBracketSameLine": false
}
-
vscode配置工作區(qū)設置：文件->首選項->設置->工作區(qū)設置
注意eslint.validate的作用：讓vscode可以高亮vue文件中的js代碼eslint問題代碼
image.png
{
"editor.tabSize": 2, // 所有文件縮進2個空格
"eslint.validate": [
// 讓vscode可以高亮vue文件中的js代碼eslint問題代碼
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"editor.formatOnSave": true // 存儲時自動格式代碼 todo open
}
這樣就實現(xiàn)了保存時自動格式化及美化代碼啦~~
想設置eslint忽略的文件娱节？
新建.eslintignore文件摊灭，寫入想要忽略的文件夾名
node_modules
public
collect
image.png
自動保存格式化代碼不生效？
文件->首選項->設置->用戶設置：查看vscode用戶設置里的配置是否沖突偷崩，將沖突的配置刪掉即可
我的配置
image.png
github項目地址：https://github.com/SmaVivian/vue-cli3-h5-init.git
