Introduction au fichier de configuration ESlint eslintrc.js dans vue-cli

eslint est un outil utilisé pour gérer et détecter le style de code js. Il peut être utilisé avec des éditeurs, tels que le plug-in eslint de vscode. Lorsqu'il y a du code qui n'est pas conforme au contenu du fichier de configuration, une erreur ou un avertissement sera signalé. Cet article partage principalement avec vous l'explication détaillée du fichier de configuration ESlint eslintrc.js dans vue-cli. est plutôt bien. Maintenant, je vais le partager avec vous et vous aider à en faire une référence.

Installer exlint

npm init -y
npm install eslint --save-dev
node_modules\.bin\eslint --init 初始化配置文件，此配置文件配置好之后，vscode编辑器自动识别

Explication du fichier de configuration .eslintrc.js de vue-cli

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

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true, 
  //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
  parser: 'babel-eslint',
  //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    sourceType: 'module'
  },
  //此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  extends: 'standard',
  // required to lint *.vue files
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
  plugins: [
    'html'
  ],
  // add your custom rules here
  // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
  // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  //"error" -> 2 开启错误规则
  // 了解了上面这些，下面这些代码相信也看的明白了
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

Recommandations associées :

Exemple d'explication détaillée de la configuration vscode de vue-cli eslint

Comment désactiver ESLint dans le projet vue

Explication détaillée des règles ESLint (1)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!