MS Docs

Linters

Install VS Code extensions:

ESLint

eslint.orgopen in new window

Install

npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue
1

Create file .eslintrc

{
  "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "prettier"]
}
1
2
3
{
  "extends": ["plugin:vue/essential", "eslint:recommended", "prettier"]
}
1
2
3

Also, you can create file .eslintignore

coverage
build
1
2

Add script to package.json

{
  "scripts": {
    "lint:script": "eslint 'src/**/*.{js,vue}'"
  }
}
1
2
3
4
5

Stylelint

stylelint.ioopen in new window

WARNING

Stylelint v14.0.0 and above

Install

npm install --save-dev stylelint stylelint-config-html stylelint-config-idiomatic-order stylelint-config-prettier stylelint-config-standard-scss postcss postcss-scss postcss-html
1

Create file .stylelintrc

{
  "extends": [
    "stylelint-config-html",
    "stylelint-config-standard-scss",
    "stylelint-config-idiomatic-order",
    "stylelint-config-prettier"
  ],
  "overrides": [
    {
      "files": ["**/*.vue", "**/*.html"],
      "customSyntax": "postcss-html"
    }
  ],
  "rules": {
    "no-descending-specificity": null,
    "selector-class-pattern": null,
    "alpha-value-notation": "number",
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["deep"]
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "extends": [
    "stylelint-config-html",
    "stylelint-config-standard-scss",
    "stylelint-config-idiomatic-order",
    "stylelint-config-prettier"
  ],
  "overrides": [
    {
      "files": ["**/*.vue", "**/*.html"],
      "customSyntax": "postcss-html"
    }
  ],
  "rules": {
    "no-descending-specificity": null,
    "selector-class-pattern": null,
    "alpha-value-notation": "number",
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["v-deep"]
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Also, you can create file .stylelintignore

coverage
build
1
2

Add script to package.json

{
  "scripts": {
    "lint:style": "stylelint 'src/**/*.{vue,html,css,scss}'"
  }
}
1
2
3
4
5

Prettier

prettier.ioopen in new window

Integrating with Lintersopen in new window

Create file .prettierrc

{
  "semi": false,
  "singleQuote": true
}
1
2
3
4

Also, you can create file .prettierignore

coverage
build
1
2

VScode

Workspace Settingsopen in new window

{
  "css.validate": false,
  "scss.validate": false,

  "stylelint.validate": ["css", "scss", "html", "vue"],

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Pre-commit Hook

Deprecated

Use lefthook instead

lint-stagedopen in new window

yorkieopen in new window

Install

npm install --save-dev yorkie lint-staged
1

Add the gitHooks to your package.json.

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}
1
2
3
4
5

Add the lint-staged to your package.json.

{
  "lint-staged": {
    "*.vue": ["eslint", "stylelint"],
    "*.js": ["eslint"],
    "*.scss": ["stylelint"]
  }
}
1
2
3
4
5
6
7

Lefthook

lefthookopen in new window

Install

npm install @arkweid/lefthook --save-dev
# or yarn:
yarn add -D @arkweid/lefthook
1
2
3

Add hooks to lefthook.yml

pre-commit:
  commands:
    eslint:
      glob: "*.{vue,js,jsx}"
      run: npx eslint {staged_files}
    style:
      glob: "*.{html,vue,css,scss}"
      run: npx stylelint {staged_files}
1
2
3
4
5
6
7
8

To test your configuration

npx @arkweid/lefthook install && npx @arkweid/lefthook run pre-commit
1