@sclable/lint

This package is a convenient wrapper of the ESLint configuration found in @sclable/eslint-config which also brings with it supported versions of ESLint and Prettier by default.

To inspect the specific linting rules you can check the rules of @sclable/eslint-config, since @sclable/lint just re-exports that configuration.

Usage

To make use of this package, you must create an ESLint configuration file that references it. This is commonly done with the extends field in a file named .eslintrc.js found in your repository's root directory:

module.exports = {
  extends: ['@sclable'],
}

It's recommended to start with a config that looks like this:

module.exports = {
  extends: ['@sclable'],
  root: true,
  ignorePatterns: ['!.eslintrc.js', 'dist'],
  rules: {
    // override or extend rules coming from `@sclable/lint` as needed
  },
}

Now, eslint can be invoked as usual for all supported file extensions:

npx eslint . --ext .js,.ts,.jsx,.tsx,.vue

Prettier

Note that this linter configuration comes with Prettier built-in and running from within ESLint. As a result, code formatting can produce linting warnings and fixing them is as easy as running ESLint with the --fix option.

For this reason, please ensure no dedicated prettier extensions/scripts are running in your IDE to avoid conflicts! The section Enable fix-on-save for VS Code users will automatically take care of this for you on the IDE level.

Prettier's configuration lives in @sclable/prettier-config and is non-extendable. In case we want to overwrite prettier's config with our own configuration file, we need to extend our .eslintrc.js with the following:

module.exports = {
  // ...
  rules: {
    // ...
    'prettier/prettier': ['warn', {}, { usePrettierrc: true }],
  },
}

More info on custom prettier rules

Bonus: Linting Recipies 📝

Use as npm scripts

You can copy-paste the following scripts in your package.json to "lint-only" (for pipelines) and "lint-and-fix" (for repo-wide clean-up):

{
  "scripts": {
    // ...
    "lint": "eslint . --ext .js,.ts,.tsx,.vue --max-warnings 0 --cache --cache-location 'node_modules/.cache/.eslintcache'",
    "lintfix": "npm run lint -- --fix"
  },
}

The above scripts also disallow warnings and utilize caching (strongly advised).

Enable linting as a Git pre-commit hook

For non-vue projects

Install the necessary dependencies (husky is a Git hook manager):

npm install --save-dev husky lint-staged

In your package.json append the following

{
  "scripts": {
    // ...
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx,vue}": "eslint --fix --max-warnings 0 --cache --cache-location 'node_modules/.cache/.eslintcache'"
  }
}

For Vue projects

A vue-cli generated project has the dependency @vue/cli-service which comes with Yorkie pre-installed. Yorkie is a fork of Husky mentioned in the above general example so we can just use it directly with the following package.json configuration:

{
  "scripts": {
    // ...
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx,vue}": "eslint --fix --max-warnings 0 --cache --cache-location 'node_modules/.cache/.eslintcache'"
  }
}

Enable realtime in-editor linting for VS Code users

Make sure you have ESLint extension installed from the VS Code Marketplace.

In your repository root, create a file .vscode/settings.json with the following contents:

{
  // Eslint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ],
}

It is recommended that this file is checked-in to Git.

Enable fix-on-save for VS Code users

Make sure you have ESLint extension installed from the VS Code Marketplace.

In your repository root, create a file .vscode/settings.json with the following contents:

{
  // VSCode
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },

  // Eslint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // Prettier
  // In case `prettier` extension is additionally enabled,
  // we switch it off since we are running prettier through eslint already
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ],
}

It is recommended that this file is checked-in to Git.