vue項目,使用eslint規範文件格式的常見問題解決

vue項目,使用eslint規範文件格式的常見問題解決

• 問題: vue項目,method後面缺少空格報錯
• 解決方案: 在項目的eslint配置文件的rules裏面加上:

'space-before-function-paren': 0

• 問題: vue項目,保存後自動加上“;”號
• 解決方案:在prettier的配置文件裏面加上:

"singleQuote": true,

• 問題: vue項目,保存後自動使用雙引號
• 解決方案:在prettier的配置文件裏面加上:

"prettier.singleQuote": true

附上vs code的setting.json和項目的.eslintrc.js配置

• setting.json,將prettier的配置文件寫在了裏面,沒有單獨寫.prettier的文件.

{
  // 強制單引號
  "prettier.singleQuote": true,
  // 保存時自動fix
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 格式化插件的配置
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 160, // No line exceeds 160 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      "printWidth": 160,
      "semi": false,
      "singleQuote": true,
      // "eslint.autoFixOnSave": true,
    }
  },
  "editor.formatOnSave": true,
  "workbench.colorTheme": "Quiet Light",
  "explorer.confirmDelete": false,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "prettier.semi": false,
  "editor.multiCursorModifier": "ctrlCmd",
  "explorer.confirmDragAndDrop": false,
  "git.autofetch": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.fontSize": 18,
  "workbench.iconTheme": "vscode-icons",
  "editor.fontFamily": "Monospace",
  "terminal.integrated.fontFamily": "monospace",
  "rainbowTags.colors": [
    "#B527A2",
    "#3ACCB4",
    "93E706",
    "#588EFC",
    "#FF611C"
  ],
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript"
  ],
  "editor.renderIndentGuides": false,
  "terminal.integrated.fontSize": 16,
  "terminal.integrated.fontWeightBold": "normal"
}

• .eslintrc.js的配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   // 其實就是添加上了這一行
    //括號後面沒有空格不報錯
    'space-before-function-paren': 0
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}