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'
  }
}