vue项目之eslint的配置

VScode的配置格式化代码

• 在设置之中 -> 选择设置 -> 在里面输入东西

tab缩进风格

• 输入tabsize - 设置tab缩进为2个空格
  

format格式化

• format
  

创建项目之eslint的规范

• 选择的是 ESLint + Standard config 标准的规范！

eslints常见的报错

• 6:1 error More than 1 blank line not allowed no-multiple-empty-lines 就是在第6行代码之中，出现多余的空格！
  • 删除多余空格！
• 8:7 error Missing space before function parentheses space-before-function-paren 在第8行代码之中函数的参数前必须带空格！init() -> init ()
  • 取消这个控制：'space-before-function-paren': 0,

VScode之中

• 在应用商店里面下载安装eslint
• 配置eslint 在设置之中搜索 setting
  
• 同理安装：Prettier - Code formatter

setting.json 配置

{
  // eslint插件的配置
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.alwaysShowStatus": true,
  // prettier的配置
  "prettier.configPath": "C:\\Users\\XXXX\\.prettierrc",
  // // 在对象或数组最后一个元素后面是否加逗号 - 不
  "prettier.trailingComma": "none",
  "prettier.semi": false, // 句尾 不 添加分号
  // 每行文字个数超过300 换行
  "prettier.printWidth": 300,
  // 使用单引号 替换 双引号
  "prettier.singleQuote": true,
  // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.arrowParens": "avoid",
  "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  // vetur 设置.vue文件在 html代码的格式化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.ignoreProjectWarning": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": false
    },
    "prettyhtml": {
      "printWidth": 300,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "trailingComma": "none",
      "semi": false,
      "singleQuote": true,
      "arrowParens": "avoid",
      "printWidth": 300
    }
  },
}

在你c盘目录下拉进去此文件.prettierrc

• C:\Users\XXX目录下

 {"semi": false, "singleQuote": true, "printWidth": 300}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'indext': 0, // 缩进风格
    "semi": [2, "always"], //语句强制分号结尾
    // 对函数 add() {} 左侧不带间隔时候 不检查！
    'space-before-function-paren': 0,
    // 在数组括号内强制实现一致的间距 不检查！
    'array-bracket-newline': 0,
    // if while function 后面的{必须与if在同一行，java风格。
    // 'brace-style': [2, '1tbs', {
    //   'allowSingleLine': true
    // }],
    // 若是一个变量定义了，没有被修改 建议使用'const'而不是'let' 关闭！
    'prefer-const1': "off",
    "no-dupe-args": 2, //函数参数不能重复
    // 强制使用一致的反勾号、双引号或单引号
    'quotes': "off", // 引号设置 关闭
    "semi": "off", // 自动插入分号 关闭
    "comma-dangle": "off", // 尾随逗号 关闭
    // 行尾出现注释之前忽略多个空格
    'no-multi-spaces': ["error", {
      ignoreEOLComments: false
    }],
    // 箭头函数 如果只有一个参数不需要括号
    // 'arrow-parens': ["error", "always"],
    'arrow-parens': ['error', 'as-needed', {
      requireForBlockBody: true,
    }],
    "arrow-parens": 0, //箭头函数用小括号括起来
    "arrow-spacing": 0, //=>的前/后括号
    //关闭禁止混用tab和空格
    "no-mixed-spaces-and-tabs": [0],
    //根据提示删除
    'no-irregular-whitespace': 'off',
    'generator-star-spacing': 0
  }
}