VUE学习----使用eslint代码检测工具，规范vue开发

场景

安装eslint后，编译第一个vue项目：

npm run dev

报错：

✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses
src\components\HelloWorld.vue:21:7
data() {
意思是：方法data和括号()之间需要一个空格。

解决方法：
方法1. 添加空格
方法2. 修改eslint的检测规则。

修改eslint的检测规则

步骤

1. 打开项目中的.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',
  }
}

2. 在rules中添加规则：

'space-before-function-paren': ["error", "never"]

3. 保存修改，重启vscode，运行项目。success！！！

推荐配置

数组的元素之间要以空格隔开（, 后面），never参数: [ 之前和 ] 之后不能带空格，always参数： [ 之前和 ] 之后必须带空格

'array-bracket-spacing': [2, 'never']

控制逗号前后的空格

'comma-spacing': [2, {before: false, after: true}]

驼峰命名

camelcase: 2

禁止使用var

'no-var': 'error'

要求使用===和!==

eqeqeq: ['warn', 'always']