@s-ui/lint v4.41.0

sui-lint

CLI to lint your code and make it compliant.

It provides:

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

Installation

$ npm install @s-ui/lint --save-dev

CLI

When installed, a new CLI sui-lint is automatically available to lint your files according to SUI conventions.

Lint JS files

$ sui-lint 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

$ sui-lint js --fix [options]

Lint SASS files

$ sui-lint sass [options]

Lints all **/src/**/*.scss files in the project, excluding node_modules, lib, dist.

.gitignore file patterns are also excluded but interpretation may differ as only glob patterns are understood

Scope commands to staged files

$ sui-lint js --staged
$ sui-lint js --fix --staged
$ sui-lint sass --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 @s-ui/lint/.prettierrc.js.

Add fixes to the stage

$ sui-lint js --staged --add-fixes
$ sui-lint js --fix --staged --add-fixes

This option can only be used with --staged.

In fix mode like with sui-lint 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 integration

Steps to integrate sui-lint with an IDE:

1. Install (if needed) eslint/sassLint plugin in your IDE.
2. Add these lines to package.json:

{
  "eslintConfig": {
    "extends": ["./node_modules/@s-ui/lint/eslintrc.js"]
  },
  "stylelint": {
    "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
  }
}

Example package.json

{
  "name": "test-project",
  "version": "1.0.0",
  "scripts": {
    "lint": "npm run lint:js && npm run lint:sass",
    "lint:js": "sui-lint js",
    "lint:sass": "sui-lint sass"
  },
  "devDependencies": {
    "@s-ui/lint": "1.0.0-beta.1"
  },
  "eslintConfig": { "extends": "./node_modules/@s-ui/lint/eslintrc.js" },
  "stylelint": { "extends": "./node_modules/@s-ui/lint/stylelint.config.js" },
}

VSCode and prettier

Prettier is integrated in sui-lint thanks to specific eslint rules. If you want VSCode to format your code exactly as sui-lint js --fix would do, you need specific config.

prettier + eslint + stylelint

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,
  "prettier.stylelintIntegration": 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 sui-lint rules.

you will need the eslintConfig and stylelintconfig properties added to the package.json as explained above

Eslint extension

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

{
  "eslint.autoFixOnSave": true
}

Stylelint extension

Install VSCode Stylelint extension.

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

In case you have already the formatOnSave property disabled but want to get the functionality working for SCSS files, you'll need to activate it for SCSS file types in order to prettier fix your problems using stylelint. For this, you have to use the next config.

  "[scss]": {
    "editor.formatOnSave": true
  },