@rockpack/codestyle NPM

@rockpack/codestyle

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

@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 Airbnb Base Config
Eslint Import Recommended
Eslint TS Recommended
Eslint Prettier Recommended
Eslint Perfectionist
Eslint Regexp
Eslint Sonarjs

Additional tools:

Stylelint
Commitlint
Prettier

Using

Installation:

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

# YARN
yarn add @rockpack/codestyle --dev

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

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

module.exports = makeConfig();

Put the code in .prettierrc

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

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
}