ESLint学习

ESLint

ESLint的定义

ESLint是一个代码风格约束工具，用于约束代码风格，能够帮助团队编写出代码风格一致的代码。
Find and fix problems in your JavaScript code

官网：https://eslint.org/

ESLint的安装

npm init @eslint/config

安装成功后会自动创建.eslintrc.js，用于配置ESLint。

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
	  // 如果是发布阶段代码中有console.log()会报告警告
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 
	 // 如果是发布阶段代码中有debugger会报告警告
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

查找ESLint的规则

当JavaScript代码不符合ESLint的代码规范会报错。
例如：

查找官方（https://eslint.org/docs/latest/rules/），搜索no-mixed-spaces-and-tabs.

发现原因是：
This rule disallows mixed spaces and tabs for indentation.

ESLint风格的工具插件

在vscode编辑器中安装以下插件，能够帮助用户编写出符合ESLint风格的代码。

• Prettier - Code formatter
• ESLint