#eslint #prettier

lint.md

• 1. Install EsLint
• 2. Config
  • 2.1. Inheriting config
• 3. Run
• 4. Watch
• 5. Eslint plugins
  • 5.1. eslint-plugin-es
• 6. Install Prettier
• 7. Run
• 8. Config
• 9. EsLint & Prettier Integration
  • 9.1. Disable conflicting rules
  • 9.2. Run prettier and then eslint --fix
• 10. Install StyleLint
• 11. Run
• 12. Stylelint plugin
• 13. Stylelint sass plugin
• 14. Stylelint & Prettier integration
  • 14.1. Disable conflicting rules
  • 14.2. Run prettier and then stylelint --fix

1. Install EsLint

• npm i -D eslint
• npx eslint --init

2. Config

• .eslintrc.js = config file created during init

2.1. Inheriting config

• ESLint will automatically look for config files until the root of the filesystem
• unless root: true is specified in a .eslintrc.* file

3. Run

• display errors/warnings = npx eslint script.js
• fix = npx eslint --fix script.js

4. Watch

• npm i -D eslint-watch
• npx esw -w --fix --color script.js

5. Eslint plugins

5.1. eslint-plugin-es

• NOTE: prototypes rules aren't yet in any release
  • here
  • they must be enabled with 'aggressive' option
• .eslintrc.cjs:

{
    "plugins": [ "es" ],
    "parserOptions": { "ecmaVersion": 2018 },
    "extends": [ "plugin:es/restrict-to-es2018" ],
    "rules": {
        "es/no-regexp-lookbehind-assertions": "error",
    },
}

6. Install Prettier

• npm i -D prettier

7. Run

• output to terminal = npx prettier script.js
• fix = npx prettier -w script.js

8. Config

• .prettierrc.js:

module.exports = {
  singleQuote: true,
};

9. EsLint & Prettier Integration

9.1. Disable conflicting rules

• npm i -D eslint-plugin-prettier
  • reports prettier rules as eslint rules
• npm i -D eslint-config-prettier
  • turn off rules that conflict with Prettier
• .eslintrc.js:

{
  // ...
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

9.2. Run prettier and then eslint --fix

• format code with prettier and then passes result to eslint --fix
• npm i -D prettier-eslint prettier-eslint-cli
• use = npx prettier-eslint --write $PWD/script.js

10. Install StyleLint

• npm i -D stylelint stylelint-config-standard
• .stylelintrc.json:

{
  "extends": "stylelint-config-standard"
}

11. Run

• npx stylelint --fix style.css

12. Stylelint plugin

• npm i -D stylelint-order
• .stylelintrc.json:

  "plugins": [
		"stylelint-order"
	],
	"rules": {
    "order/properties-alphabetical-order": true
	}

13. Stylelint sass plugin

• introduces rules specific to SCSS syntax, IT'S NOT a style guide
• npm i -D stylelint-scss
• .stylelintrc.json:

  "plugins": [
		"stylelint-scss"
	],
	"rules": {
		"scss/double-slash-comment-empty-line-before": "always"
	}

14. Stylelint & Prettier integration

• NOTE: method 1 is recommended

14.1. Disable conflicting rules

• npm i -D stylelint-prettier
  • reports prettier as a stylelint rule
• npm i -D stylelint-config-prettier
  • disable rules that conflict with prettier
• .stylelintrc.json:

{
  "extends": [
		"stylelint-config-standard",
		"stylelint-config-prettier" // NOTE: must be the last
	],
  "plugins": [
		"stylelint-prettier"
	],
	"rules": {
		"prettier/prettier": true
	}
}

14.2. Run prettier and then stylelint --fix

• NOTE: deprecated
• npm i -D prettier-stylelint