eslint-plugin-topxel

Topxel's shareable rules and configuration for ESlint: The pluggable linting utility for JavaScript and JSX

Use it as is or as a foundation for your own custom ESLint configuration.

Think about this plugin as a shareable configuration with dependencies (plugins). This is an aproach to solve this use case: 3458 🤷

 

Installation

Install eslint and eslint-plugin-topxel either with Yarn or npm:

With Yarn

yarn add --dev eslint eslint-plugin-topxel

With npm

npm install --save-dev eslint eslint-plugin-topxel

 

Setup

Topxel's shareable ESLint rules are bundled in eslint-plugin-topxel package. To enable these rules add a eslintConfig property in your package.json or create a .eslintrc file in the root directory. Although we encourage using the first method to avoid having hidden files in your project. See the ESLint configuration docs for more details.

{
  "eslintConfig": {
    "plugins": ["topxel"],
    "extends": "plugin:topxel/recommended"
  }
}

 

Using the linter in the CLI

You can run ESLint by adding a custom linting script to your package.json. Keep in mind that you must provide the specific relative path where your js files are located. See the ESLint CLI docs for more details.

{
  "scripts": {
    "eslint": "eslint 'example/js/*.js'"
  }
}

Running the script with Yarn

yarn run eslint

Running the script with npm

npm run eslint

 

Using the linter with your favourite code editor

Running the linter in the CLI is great but it doesn't provide instant feedback while you are writing your code. That's why we always encourage our team to extend the code editor with some tools that can help with this task.

Any of the extensions bellow will read your config from package.json or .eslintrc and start live linting your js and jsx files inside the editor, so no further configuration is needed.

Atom

Use the apm command to install linter and linter-eslint Atom packages. If the apm command is not available in your shell, check that the Atom Shell Commands are installed.

apm install linter linter-eslint

VSCode

1. Run Install extension command from Command Palette.
2. Search and choose eslint.

Sublime Text

Use Package Control to install the linter plugin.

1. In Sublime Text, bring up the Command Palette and type install. Select Package Control: Install Package.
2. When the list of available packages appears, type linter and select SublimeLinter.
3. Repeat step 1 and when the package list appears again, type eslint and select SublimeLinter-contrib-eslint.

 

Extending the config

If you want to extend or override some of the rules in this configuration, simply add a "rules" key to your config. See the ESLint Rules and ESLint Configuring Rules for more details.

For example, to override the rule quotes from double to single and change identation for spaces to tabs with the ident rule:

{
  "eslintConfig": {
    "plugins": "topxel",
    "extends": "plugin:topxel/recommended",
    "rules": {
      "ident": ["error", "tab"],
      "quotes": ["error", "double"]
    }
  }
}

 

License

Copyright (c) 2017 Topxel - Licensed under the MIT License.