eslint篇-vscode + eslint + vue + vue-cli 项目构建规范化

如何在 vscode 里用 eslint 规范你的 code？

前面说的话：

用eslint的目的是为了在团队合作中，用来代码风格的统一，
在团队中如果用了eslint，那么你就要把编码效率提高起来。

开始

• 安装插件ESLint 、Vetur、Prettier

  
  
  ESLint
  
  
  Vetur
  
  
  Prettier

• 用vue-cli搭建项目，选择用 eslint yes

• 生成一个vue spa项目之后，编辑器 文件->首选项->设置->用户设置 [也可以在工作区/文件夹设置]
  这些配置都是为了在保存文件的时候自动修复，提升编码效率
  如下：

{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 忽略需要eslint的文件夹
  "eslint.options": {
    "ignorePattern": ["node_modules", "build", "dist", "config", "static"]
  },
  // 代码缩进修改成2个空格
  "editor.tabSize": 2,
  // 不显示匿名函数前面的方法空格
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  // 格式化单引号
  "prettier.singleQuote": true,
  "vetur.validation.template": false,
  // 可以让html按照属性格式化换行
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // vscode格式化Vue出现的问题，把"vetur.format.defaultFormatter.js": "prettier",改为 "vetur.format.defaultFormatter.js": "vscode-typescript"
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // vue组件中html代码格式化样式
      "wrap_attributes": "force-aligned"
    }
  },
  /* 编辑器设置相关 begin*/
  // 开启换行
  "editor.wordWrap": "on",
  "workbench.colorTheme": "Monokai",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "files.trimTrailingWhitespace": false,
  /* 编辑器设置相关 end*/
}

即可！

• 一般我们都用eslint默认的配置来编写，如果想要有自己的规则，可以在
  .eslintrc.js文件中编辑

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    /*  自己添加的规则 begin */
    'no-multiple-empty-lines': ['error', { max: 3 }],
    // 方法名后面不加空格
    'space-before-function-paren': ['error', 'never'],
    // 语句强制分号结尾
    semi: ['error', 'always'],
    quotes: ['error', 'single'],
    // iview 部分标签会显示错误
    'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false }]
    /*  自己添加的规则 end */
  }
};

以上的配置，就可以开始开发vue spa项目了，ctrl+s保存项目的时候就会自动格式化，自动修复

以下是多余的：

• 针对单个 js 文件禁用 ESLint 语法校验

1. 在代码顶部添加一行注释

/* eslint-disable */

ESLint 在校验的时候就会跳过后面的代码

2. 还可以在注释后加入详细规则，这样就能避开指定的校验规则了

/* eslint-disable no-new */

例如我们用vue-cli生成的项目