@rockpack/codestyle NPM

@rockpack/codestyle

@rockpack/codestyle is an efficiently customized Eslint with many best practice rules and additions.

@rockpack/codestyle fully support new ESLint 9.0 flat config.

@rockpack/codestyle this module is part of the Rockpack project. See more details on the official site.

Features:

Eslint configs:

TS support, pure JS support, React support
Prettier integrated
Eslint Config Recommended
Eslint React Recommended
Eslint TS Recommended
Eslint Prettier Recommended
Eslint Perfectionist
Eslint Regexp

Additional tools:

Stylelint
Commitlint
Prettier

Using

Installation:

# NPM
npm install @rockpack/codestyle --save-dev

# YARN
yarn add @rockpack/codestyle --dev

Make eslint.config.js, .prettierrc in the root of project
Put the code in .eslintrc.js

const { makeConfig } = require('@rockpack/codestyle/index.js');

module.exports = makeConfig();

Put the code in .prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "semi": true,
  "bracketSpacing": true,
  "printWidth": 120,
  "endOfLine": "lf"
}

Extensibility

If you need to change the ESLint configuration you can just extend return object from makeConfig function:

const { makeConfig } = require('@rockpack/codestyle');

const camelCaseAllow = ['download_url'];

const config = makeConfig();

config.push({
  rules: {
    camelcase: ['error', { allow: camelCaseAllow, properties: 'always' }],
  },
});

module.exports = config;

IDE Integration

We can set up our IDE to fix all lint rules and format code by Prettier.

Webstorm

Manual setup

Open Preferences
Find Node.js tab. Choice Node.js interpreter
Find ESLint.

Set Manual Configuration and set folder to "node_modules/eslint" in your project
Set working directories to root of your project
Set path to your .eslintrc.js file
Select "Run eslint --fix on save"

Find Prettier.

Set Prettier path
Select "On Reformat code action", "On save"

VSCode

Manual setup

Set "Format on save"
Set "Format on paste"

Configuration setup

mkdir .vscode && touch .vscode/settings.json

Then add settings:

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "tslint.enable": false
}