@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:

$3

- 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

$3

- Stylelint
- Commitlint
- Prettier

Using

1. Installation:

``sh


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

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

module.exports = makeConfig();
`

4. Put the code in .prettierrc

`json
{
"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:

`ts
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.

$3

#### 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"

$3

#### Manual setup

1. Set "Format on save"
2. Set "Format on paste"

#### Configuration setup

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

Then add settings:

`json
{
"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