Vue项目设置Eslint规则

Posted 2023-02-15 是小橙鸭丶

一、需求

当我们创建完vue的新项目后，希望写完代码后会自动格式化代码,以及代码规范化的校验，以便团队相互配合开发

二、Vscode安装插件

安装 ESLlint、Vetur、Prettier 这三个插件。

1.eslint

在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量

2.Vetur

这个插件主要作用就是让vscode识别.vue文件，实现语法高亮。

3.Prettier

它的作用是将我们散漫的风格迥异的代码格式化为符合规范的代码。

三、代码配置

🍦打开.eslintrc.js文件，我们可以在rules处增加一个规则，这些规则会覆盖刚刚我们采用的airbnb默认配置，也就是说，我们可以在这里自定义，这里是我常用的配置：

module.exports = 
  /**
   * 文件内局部设置
   * 【】eslint可以具体文件中设置特定代码的规则，常用于跳过某条语句的检测。
   * 【】注销全部规则，在代码前新建一行，添加注销 /* eslint-disable *\\/  。如果没有恢复设置的语句，则下列全部代码都会跳过检测。
   * 【】恢复eslint，在代码前新建一行，添加注销 /* eslint-enable *\\/
   * 【】指定忽略的规则，/* eslint-disable no-alert, no-console *\\/
   * 【】在特定行禁用，// eslint-disable-line
   * 【】在下一行禁用，// eslint-disable-next-line
   */

  // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
  root: true,
  // 此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: 
    node: true,
    jquery: true,
  ,
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  extends: ['plugin:vue/recommended', '@vue/prettier'],
  /*
   下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
    主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
    "off" -> 0 关闭规则
    "warn" -> 1 开启警告规则
    "error" -> 2 开启错误规则
  */

  rules: 
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-v-html': 'off',

    // 'no-empty': 0, //块语句中的内容不能为空 - 关闭
    // 'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格 - 开启
    // 'no-undef': 1, //不能有未定义的变量 - 打开 1是警告
    // 'no-unused-vars': [
    //   2,
    //   
    //     vars: 'all',
    //     args: 'none',
    //   ,
    // ], //不能有声明后未被使用的变量或参数 0关 1警告 2声明不使用就爆红
    'space-before-function-paren': [0, 'never'], //函数定义时括号前面要不要有空格：设置为0就是关闭这个规则的检验
    'prefer-const': 0, //首选const -- 关闭（就可以用var let const）
    'vue/html-self-closing': [
      'error',
      
        html: 
          void: 'never',
          normal: 'any',
          component: 'any',
        ,
        svg: 'always',
        math: 'always',
      ,
    ], //html使用单闭合标签 -打开（配置：在html中never从不开启）
  ,
  parserOptions: 
    // eslint解析器配置项
    // 解析器是用于解析js代码的，怎么去理解每一个表达式，有点C++中编译器的概念，会对js进行一些语法分析，语义分析什么的，才能判断语句符不符合规范。而不是通过简单的字符串对比。
    parser: 'babel-eslint', // 指定eslint解析器：babel-eslint是围绕Babel解析器的包装器使其与ESLint兼容；可能值espree、esprima
  ,
  overrides: [
    
      files: [
        '**/__tests__/*.j,ts?(x)',
        '**/tests/unit/**/*.spec.j,ts?(x)',
      ],
      env: 
        jest: true,
      ,
    ,
  ],

🎍保存代码时自动规范格式​

这个需要在vscode中进行配置，按住ctrl+shift+p,输入setting,打开setting.json,完成以下配置：

  "[vue]": 
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  ,
  "editor.quickSuggestions": 
    "strings": true
  ,
  "workbench.colorTheme": "Panda Syntax",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "emmet.triggerExpansionOnTab": true,
  "editor.formatOnSave": true,
  "javascript.format.enable": true,
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "[json]": 
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  ,
  "liveServer.settings.donotShowInfoMsg": true,
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.exclude": 
    "**/.idea": true
  ,
  "editor.codeActionsOnSave": 
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  ,
  "[javascript]": 
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  ,
  "[jsonc]": 
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  ,
  "[html]": 
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  ,
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.vueIndentScriptAndStyle": true,
  "docthis.includeAuthorTag": true,
  "docthis.includeDescriptionTag": true,
  "docthis.enableHungarianNotationEvaluation": true,
  "docthis.inferTypesFromNames": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "files.autoSave": "onFocusChange",
  "path-intellisense.mappings": 
    "@": "$workspaceRoot/src"
  ,
  "files.eol": "\\n",
  "i18n-ally.localesPaths": ["src/i18n"],
  "editor.defaultFormatter": "esbenp.prettier-vscode"

🍃另外，有些文件，我们并不需要用eslint作为校验，就可以在根目录下新建一个.eslintignore文件来管理：

src/assets
src/icons
public
dist
node_modules

🎁再来谈代码风格问题

像缩进是用空格还是用tab啦，使用单引号还是双引号啦，句末需不需要分号啦，都属于代码风格问题，他们影响的更多的是代码的统一风格。而这些，prettier也可以进行规范。

项目级的配置，在项目根目录添加配置文件prettier.config.js 或者 .prettierrc.js，然后配置：

module.exports = 
  printWidth: 80, // 超过最大值换行
  tabWidth: 2, // 缩进字节数
  useTabs: false, // 句尾添加分号
  semi: false, // 使用单引号代替双引号 必须无分号结尾
  singleQuote: true, // 使用单引号代替双引号 必须无分号结尾
  quoteProps: 'as-needed',
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 " foo: bar "
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
  arrowParens: 'always',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: true,
  endOfLine: 'lf',