User Guide ​

💿 Installation ​

npm install --save-dev eslint eslint-plugin-yml

npm install --save-dev eslint eslint-plugin-yml

📖 Usage ​

Configuration ​

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    "plugin:yml/standard",
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'yml/rule-name': 'error'
  },
};

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    "plugin:yml/standard",
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'yml/rule-name': 'error'
  },
};

This plugin provides configs:

• plugin:yml/base ... Configuration to enable correct YAML parsing.
• plugin:yml/recommended ... Above, plus rules to prevent errors or unintended behavior.
• plugin:yml/standard ... Above, plus rules to enforce the common stylistic conventions.
• plugin:yml/prettier ... Turn off rules that may conflict with Prettier.

See the rule list to get the rules that this plugin provides.

Parser Configuration ​

If you have specified a parser, you need to configure a parser for .yaml.

For example, if you are using the "@babel/eslint-parser", configure it as follows:

module.exports = {
  // ...
  extends: ["plugin:yml/standard"],
  // ...
  parser: "@babel/eslint-parser",
  // Add an `overrides` section to add a parser configuration for YAML.
  overrides: [
    {
      files: ["*.yaml", "*.yml"],
      parser: "yaml-eslint-parser",
    },
  ],
  // ...
};

module.exports = {
  // ...
  extends: ["plugin:yml/standard"],
  // ...
  parser: "@babel/eslint-parser",
  // Add an `overrides` section to add a parser configuration for YAML.
  overrides: [
    {
      files: ["*.yaml", "*.yml"],
      parser: "yaml-eslint-parser",
    },
  ],
  // ...
};

Parser Options ​

The following parser options for yaml-eslint-parser are available by specifying them in parserOptions in the ESLint configuration file.

module.exports = {
  // ...
  overrides: [
    {
      files: ["*.yaml", "*.yml"],
      parser: "yaml-eslint-parser",
      // Options used with yaml-eslint-parser.
      parserOptions: {
        defaultYAMLVersion: "1.2",
      },
    },
  ],
  // ...
};

module.exports = {
  // ...
  overrides: [
    {
      files: ["*.yaml", "*.yml"],
      parser: "yaml-eslint-parser",
      // Options used with yaml-eslint-parser.
      parserOptions: {
        defaultYAMLVersion: "1.2",
      },
    },
  ],
  // ...
};

See also https://github.com/ota-meshi/yaml-eslint-parser#readme.

Running ESLint from the command line ​

If you want to run eslint from the command line, make sure you include the .yaml extension using the --ext option or a glob pattern, because ESLint targets only .js files by default.

Examples:

eslint --ext .js,.yaml,.yml src
eslint "src/**/*.{js,yaml,yml}"

eslint --ext .js,.yaml,.yml src
eslint "src/**/*.{js,yaml,yml}"

💻 Editor Integrations ​

Visual Studio Code ​

Use the dbaeumer.vscode-eslint extension that Microsoft provides officially.

You have to configure the eslint.validate option of the extension to check .yaml files, because the extension targets only *.js or *.jsx files by default.

Example .vscode/settings.json:

{
  "eslint.validate": ["javascript", "javascriptreact", "yaml"]
}

{
  "eslint.validate": ["javascript", "javascriptreact", "yaml"]
}

JetBrains WebStorm IDEs ​

In any of the JetBrains IDEs you can configure the linting scope. Following the steps in their help document, you can add YAML files to the scope like so:

1. Open the Settings/Preferences dialog, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select Automatic ESLint configuration or Manual ESLint configuration.
2. In the Run for files field, update the pattern that defines the set of files to be linted to include YAML files as well:

{**/*,*}.{js,ts,jsx,tsx,html,vue,yaml,yml}
                                 ^^^^ ^^^

{**/*,*}.{js,ts,jsx,tsx,html,vue,yaml,yml}
                                 ^^^^ ^^^

❓ FAQ ​

• TODO