Eslint has been used extensively in our projects, and for the rules section you can refer to the documentation for your personal requirements. Here is a brief explanation of my own understanding of extends and plugins

extends

Attribute values can be:

  • A string specifying a configuration (path to a configuration file, name of a shareable configuration, ESLint :recommended, or ESLint :all)
  • Array of strings: Each configuration inherits its previous configuration

How to understand:

It can be the path to an ESLint configuration file, the name of the NPM package or plugin we downloaded, or some style esLint recommends such as esLint :recommended or ESLint: All. When it is an array, it is like a collection of these configuration files, except that the subsequent configuration with the same name overwrites the previous configuration

Writing Rules:

  • Shareable configuration

The simple explanation is to extract the ESLint rule we wrote and publish an NPM package for everyone to download and use, usually output a configuration object

module.exports = {
    globals: {
        MyGlobal: true
    },
    rules: {
        semi: [2."always"]}}Copy the code

Installation packages that start with eslint-config, such as eslint-config-standard, can omit the previous eslint-config

Extends: standard or extends: eslint-config-standard are both possible

  • The plug-in

For example, we downloaded the eslint-plugin-vue plugin, which is essentially a wrapper around rules, so how to use it:

{
    "plugins": [
        "vue" // This is short for eslint-plugin-vue, the plugin declaration]."extends": [
        "eslint:recommended"."plugin:vue/recommended" // This is a reference to a class of configuration objects under the plugin]."rules": {
       "vue/require-v-for-key": "error" // Use of a rule under a specific ESlint-plugin-vue plugin}}Copy the code
  • The file path

The extends property value can be an absolute or relative path to the base configuration file. ESLint resolves the relative path to a base configuration file relative to the configuration file that uses it.

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js"."./node_modules/coding-standard/.eslintrc-es6"."./node_modules/coding-standard/.eslintrc-jsx"]."rules": {
        "eqeqeq": "warn"}}Copy the code
  • Using “eslint:all/eslint:recommended”

An extends property with a value esLint :recommended enables a set of core rules that report common problems and are marked in the rules page as. This recommended subset can only be updated in major versions of ESLint.

The value is ESLint :all, which enables all core rules in the currently installed ESLint. These rules can be changed in any version of ESLint. Not recommended

module.exports = {
    "extends": "eslint:recommended"."rules": {
        // enable additional rules
        "indent": ["error".4]."linebreak-style": ["error"."unix"]."quotes": ["error"."double"]."semi": ["error"."always"].// override default options for rules from base configurations
        "comma-dangle": ["error"."always"]."no-cond-assign": ["error"."always"].// disable rules from base configurations
        "no-console": "off",}}Copy the code

plugins

ESLint supports the use of third-party plugins. Before using the plug-in, you must install it using NPM. When configuring plug-ins in a configuration file, you can use the plugins keyword to store a list of plug-in names. The eslint-plugin- prefix can be omitted from the plugin name.

{
    "plugins": [
        "plugin1".// eslint-plugin-plugin1
        "eslint-plugin-plugin2"]}Copy the code