CLI to lint your code and make it compliant.

It provides:

• Same js, ts and sass style of code across for all my repos.
• Linting rules a reference package, not duplicated linting config in every project.
• Implemented as a reusable CLI.

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:

1. Install (if needed) eslint/stylelint plugin in your IDE.
2. Add these lines to 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:

1. Install (if needed) eslint/stylelint plugin in your IDE.
2. Add these lines to 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 the package.json as explained above

Install VSCode ESLint extension, and set eslint.autoFixOnSave to true:

{
  "eslint.autoFixOnSave": true
}

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,
  },
}