CLI to lint your code and make it compliant.
It provides:
This package is a fork of SUI, version 2.20.0
$ npm install @rogal/front-linter --save-dev
When installed, a new CLI front-linter
is automatically available to lint your files according to the conventions.
$ front-linter js [options]
It lints all js|jsx|ts|tsx
files in your project, excluding .eslintignore
and .gitignore
file patterns.
Same options available in eslint except one: -c, --config
. If you try to use this option, an exception will be thrown.
$ front-linter js --fix [options]
$ front-linter sass [options]
Lints all **/src/**/*.scss
files in the project, excluding node_modules
, lib
, dist
, public
.
.gitignore
file patterns are also excluded but interpretation may differ as only glob patterns are understood
Now we have three presets.
We have 3 presets: default, typescript y react
You can combine react with default or typescript
$ front-linter js -- --presets=default,react
$ front-linter js -- --presets=typescript,react
$ front-linter js --staged
$ front-linter js --fix --staged
Same command but applied only on staged files (obtained with git diff --cached --name-only --diff-filter=d
command).
For integrations, prettier config is located in @rogal/front-linter/lint/.prettierrc.js
.
$ front-linter js --staged --add-fixes
$ front-linter js --fix --staged --add-fixes
This option can only be used with --staged
.
In fix mode like with front-linter js --fix
, the --add-fixes
option will stage the files again (git add <file...>
)
It's usefull to make your code autoformat before any commit.
Steps to integrate front-linter with an IDE:
package.json
:{
"eslintConfig": {
"extends": ["./node_modules/@rogal/front-linter/eslint-react.js"]
},
"stylelint": {
"extends": [
"./node_modules/@rogal/front-linter/.stylelintrc.js"
]
}
}
Steps to integrate front-linter with an IDE:
package.json
:{
"eslintConfig": {
"extends": ["./node_modules/@rogal/front-linter/eslint-react.js"]
},
"stylelint": {
"extends": [
"./node_modules/@rogal/front-linter/.stylelintrc.js"
]
}
}
{
"name": "test-project",
"version": "1.0.0",
"scripts": {
"lint:js": "front-linter js",
"lint:sass": "front-linter sass"
},
"eslintConfig": { "extends": ["./node_modules/@rogal/front-linter/eslint.js"] },
"stylelint": {
"extends": [
"./node_modules/@rogal/front-linter/.stylelintrc.js"
]
}
}
{
"name": "test-project",
"version": "1.0.0",
"scripts": {
"lint:ts": "front-linter js -- --presets=typescript",
"lint:sass": "front-linter sass"
},
"eslintConfig": { "extends": ["./node_modules/@rogal/front-linter/eslint.js"] },
"stylelint": {
"extends": [
"./node_modules/@rogal/front-linter/.stylelintrc.js"
]
}
}
Prettier is integrated in front-linter thanks to specific eslint rules.
If you want VSCode to format your code exactly as front-linter js --fix
would do, you need specific config.+
If you have installed prettier in VSCode you can launch it with CMD + Shift + P -> Format Document
over an opened file to format it with prettier
By adding this line to your settings
{
"prettier.eslintIntegration": true
}
when you do CMD + Shift + P -> Format Document
the format tool will use prettier-eslint
^[prettier-eslint
is a dependency of prettier-vscode] that will do a eslint --fix
after formatting your JavaScript file with prettier
So this shortcut will format our files ( w/ prettier) according to our front-linter
rules
you will need the
eslintConfig
property added to thepackage.json
as explained above
Install VSCode ESLint extension, and set eslint.autoFixOnSave
to true:
{
"eslint.autoFixOnSave": true
}
formatOnSave
If you have prettier enabled, or the default VSCode formatter activated with editor.formatOnSave
to true, it may conflict with the eslint.autoFixOnSave
option.
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
},
}