Opinionable & sharable linter configs.
Install eslint and peers:
yarn add @qxy/eslint-config@next eslint typescript -D
Install prettier and peers:
yarn add @qxy/prettier-config@nex prettier -D
Install stylelint and peers:
yarn add @qxy/stylelint-config@nex @qxy/prettier-config@nex postcss stylelint prettier -D
ESLint
Configuration in .eslintrc.json
:
{
"root": true,
"extends": ["@qxy"]
}
Prettier
Configuration in package.json
:
{
"prettier": "@qxy/prettier-config"
}
Stylelint
Configuration in stylelint.config.cjs
:
module.exports = {
extends: ['@qxy/stylelint-config'],
rules: {
// override rules
},
}
Run linter with npm scripts:
{
"scripts": {
"lint:script": "eslint .",
"lint:style": "stylelint \"src/**/*.{vue,scss}\""
}
}
Use yarn lint:script --fix
and yarn lint:style --fix
to autofix fixable problems.
Lint staged files only via nano-staged
:
{
"nano-staged": {
"*.{js,ts,json,vue,html,md,yml,yaml}": "eslint --fix",
"*.{css,vue,scss}": "stylelint --fix"
}
}
Auto fix when coding with VSCode
:
Configuration in .vscode/settings.json
{
"prettier.enable": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": [
"vue",
"yaml",
"html",
"json",
"jsonc",
"json5",
"markdown",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
},
"[javascript][typescript][vue]": {
"editor.formatOnSave": false
}
}