varp-code

ESLint, StyleLint, Prettier configs by Varp

Usage no npm install needed!

<script type="module">
  import varpCode from 'https://cdn.skypack.dev/varp-code';
</script>

README

varp-code

ESlint

  1. Install with peer dependencies:
npm install --save-dev varp-code eslint eslint-import-resolver-alias eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier
  1. Create .prettierrc.json file with content:
{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "printWidth": 120,
    "useTabs": false
}

  1. Create .eslintrc.js file with content:
module.exports = {
    extends: ["plugin:varp-code/index"],
    rules: {
        /* Additional rules */
    }
};
  1. Add .vscode/settings.json file with content:
{
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.trimAutoWhitespace": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "typescript",
        "typescriptreact"
    ],
    "eslint.run": "onSave",
    "eslint.nodePath": "./node_modules"
}
  1. Add new scripts to package.json:
"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}

StyleLint

  1. Install with peer dependencies:
npm install --save-dev stylelint stylelint-config-recommended stylelint-order stylelint-scss stylelint-selector-bem-pattern
  1. Create .stylelintrc.js with content:
module.exports = {
    extends: ["plugin:varp-code/style"],
    rules: {
        /* Additional rules */
    }
};
  1. Add .vscode/settings.json with content:
{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    },
    "stylelint.validate": ["scss"],
}
  1. Add .stylelintignore with content:
node_modules
!*.scss
  1. Add new scripts to package.json:
"scripts": {
  "stylelint": "stylelint .",
  "stylelint:fix": "stylelint . --fix"
}
  1. Call stylelint with eslint:
"scripts": {
    "lint": "stylelint . && eslint .",
    "lint:fix": "stylelint . --fix && eslint . --fix"
}

Notes

  • typescript package not on peerDependencies, but it require to be on the project.