vscode支持vue-cli3構建的項目引入eslint代碼檢測+prettier代碼美化

1. vscode 安裝插件：

   • Vetur
   • prettier
   • Eslint

2. 禁用沖突的插件:

   • Beautify

3. 刪除package.json中默認eslint的配置

   
   
   image.png

4. 新建.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'], //強制不使用分號結尾
    eqeqeq: ['error', 'always'], // 強制在任何情況下都使用 === 和 !==
    'brace-style': ['error', '1tbs', { allowSingleLine: true }] //強制在代碼塊中使用一致的大括號風格
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    parser: 'babel-eslint'
  }
}

5. 新建.prettierrc文件對代碼美化進行配置

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "jsxBracketSameLine": false
}

6. vscode配置工作區設置：文件->首選項->設置->工作區設置
   注意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
}

這樣就實現了保存時自動格式化及美化代碼啦~~

想設置eslint忽略的文件？

新建.eslintignore文件，寫入想要忽略的文件夾名

node_modules
public
collect

image.png

自動保存格式化代碼不生效？

文件->首選項->設置->用戶設置：查看vscode用戶設置里的配置是否沖突，將沖突的配置刪掉即可
我的配置

image.png

github項目地址：https://github.com/SmaVivian/vue-cli3-h5-init.git