@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

1. Installation:

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

# YARN
yarn add @rockpack/codestyle --dev

2. Make eslint.config.js, .prettierrc in the root of project

3. Put the code in .eslintrc.js

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

module.exports = makeConfig();

4. 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

1. Open Preferences
2. Find Node.js tab. Choice Node.js interpreter
3. 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"

4. Find Prettier.

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

VSCode

Manual setup

1. Set "Format on save"
2. 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
}

The MIT License

MIT