Skip to content

Latest commit

 

History

History
 
 

sui-lint

Readme.md

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.

To change the default pattern you can use the flag --pattern:

example:

$ sui-lint sass --pattern ./widgets/**/*.scss

.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/stylelint/prettier plugins in your IDE. For example, for Visual Studio Code, the recommended ones are:

  2. After install the package, it will add automatically the needed configuration to your package.json file. If not, make sure you add these lines:

{
  "eslintConfig": {
    "extends": [
      "./node_modules/@s-ui/lint/eslintrc.js"
    ]
  },
  "stylelint": {
    "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
  },
  "prettier": "./node_modules/@s-ui/lint/.prettierrc.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": "3"
  },
  "eslintConfig": {
    "extends": [
      "./node_modules/@s-ui/lint/eslintrc.js"
    ]
  },
  "stylelint": {
    "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
  },
  "prettier": "./node_modules/@s-ui/lint/.prettierrc.js"
}

Visual Studio Code and Prettier integration

Prettier is integrated in sui-lint with some specific rules. If you want VSCode to format your code exactly as sui-lint js --fix would do, keep reading:

prettier + eslint + stylelint = 🎉

CMD + Shift + P -> Preferences: Open Settings (JSON).

Add the next config to your preferences:

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

It will format and fix the problems of linter on saving. If you prefer to do this manually, you could avoid adding the eslint.autoFixOnSave and editor.formatOnSave configs.