ESLint shareable config for the Kelsus JavaScript style guide (ES2015+ version)
$ yarn add eslint eslint-config-kelsus --dev
Once the eslint-config-kelsus
package is installed, you can use it by specifying kelsus
in the extends
section of your ESLint configuration.
Add eslint
configuration to the package.json
.
{
"eslintConfig": {
"extends": ["kelsus"],
"rules": {
// Additional, per-project rules...
}
}
}
kelsus
config extends eslint:recommended
and prettier
.
kelsus
also set the environment to:
{
"env": {
"es6": true,
"node": true,
"sourceType": "module"
}
}
There are several rules in the eslint:recommended
ruleset that Kelsus style enforces in your project.
To see how the kelsus
config compares with eslint:recommended
, refer to the source code of index.js
, which lists every ESLint rule along with whether (and how) it is enforced by the kelsus
config.
touch .eslintignore
Content:
# /node_modules/* and /bower_components/* ignored by default
# Ignore built files except build/index.js
build/*
publish/*
!build/index.js
# Ignore the shared folder because is used with docker-compose, no need of linting
/shared/*
# Ignore the deploy folder because is used for deploy, no need of linting
/deploy/*
# Ignore the dosc folder because is used for documentation files, no need of linting
/docs/*
On Kelsus, we are proud to use Prettier as source for Opinionated Code Formatting.
kelsus
ESLint configuration already extendsprettier
that will turns off all rules that are unnecessary or might conflict with Prettier.
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
Add prettier
configuration to the package.json
.
{
"prettier": {
"printWidth": 100,
"singleQuote": true
}
}
"scripts": {
"format-output": "prettier '**/*.{js,jsx}'",
"format": "prettier --write '**/*.{js,jsx}'",
"lint-errors": "eslint '**/*.{js,jsx}' --quiet",
"lint": "eslint '**/*.{js,jsx}'",
}
- "format-output": This will show on the screen the format changes in your code that will be
made if you run
prettier
. - "format": This will format your code with
prettier
. - "lint": This script will report errors and warnings of your code, based on the eslint-rules of your configuration.
- "lint-errors": This script will report only errors of your code, based on the eslint-rules of your configuration.
note: Lint can autofix errors, to do that, you can run
`$ yarn run lint-errors -- --fix`;
Adding an extra step on your build process, will ensure that the code is passing the linting rules.
So, right before your npm run test
you can call npm run lint-errors
.
# Run the linter
npm run lint-errors
# Run the tests
npm run test
-
Install Prettier extention in Visual Studio - JavaScript formatter by Esben Petersen
-
Install the ESLint extention in Visual Studio - ESLint by Dirk Baeumer
-
Add a shortcut to make eslint fix all auto-fixable problems. Add this to your keybindings.json
[ { "key": "ctrl+l", "command": "eslint.executeAutofix", "when": "editorTextFocus && !editorReadonly" } ]
- I can't get the linter to work.
Have you checked if there are other configuration files for eslint or prettier (.eslintrc, .prettierrc)? if yes, remove them and try again.
- Docker gets stuck when I add the linting step.
Check that you are not running the linter on files that you don't need. Start by ensure that `node_modules` and your `build` folder is ignred.
Apache-2 © Kelsus