@rogal/front-linter v3.0.0-beta.9

front-linter

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

Installation

$ npm install @rogal/front-linter --save-dev

CLI

When installed, a new CLI front-linter is automatically available to lint your files according to the conventions.

Lint JS files

$ front-linter js [options]

It lints all js|jsx 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.

Format JS files

$ front-linter js --fix [options]

Lint Typescript files

$ front-linter js -- --presets=typescript [options]

It lints all ts|tsx|js|jsx 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.

For typescript you'll need to install the eslint-import-resolver-typescript

  npm i --save-dev eslint-import-resolver-typescript

Format TS files

$ front-linter  -- --presets=typescript --fix [options]

Lint SASS files

$ 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

Presets

Now we have three presets.

You have the preset javascript, typescript and react

You can combine react with javascript or typescript with react

$ front-linter js -- --presets=javascript,react

$ front-linter js -- --presets=typescript,react

Scope commands to staged files

$ 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.

Add fixes to the stage

$ 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.

IDE JS & SASS integration

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/javascript-react-eslint.js"]
  },
  "stylelint": {
    "extends": [
      "./node_modules/@rogal/front-linter/.stylelintrc.js"
    ]
  }
}

IDE TS & SASS integration

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/typescript-react-eslint.js"]
  },
  "stylelint": {
    "extends": [
      "./node_modules/@rogal/front-linter/.stylelintrc.js"
    ]
  }
}

Example JS & SASS package.json

{
  "name": "test-project",
  "version": "1.0.0",
  "scripts": {
    "lint:js": "front-linter js",
    "lint:sass": "front-linter sass"
  },
  "devDependencies": {
    "@rogal/front-linter": "1.0.0"
  },
  "eslintConfig": { "extends": ["./node_modules/@rogal/front-linter/default-preset-eslint.js"] },
  "stylelint": {
    "extends": [
      "./node_modules/@rogal/front-linter/.stylelintrc.js"
    ]
  }
}

Example TS & SASS package.json

{
  "name": "test-project",
  "version": "1.0.0",
  "scripts": {
    "lint:ts": "front-linter js -- --presets=typescript",
    "lint:sass": "front-linter sass"
  },
  "devDependencies": {
    "@rogal/front-linter": "1.0.0"
  },
  "eslintConfig": { "extends": ["./node_modules/@rogal/front-linter/typescript-react-eslint.js"] },
  "stylelint": {
    "extends": [
      "./node_modules/@rogal/front-linter/.stylelintrc.js"
    ]
  }
}

VSCode and prettier

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.+

prettier + eslint

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

eslint extension

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

{
  "eslint.autoFixOnSave": true
}

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