eslint-config-enact Linting Configuration

The Enact team recommends all developers use ESLint to statically analyze files for potential errors and to help enforce a common coding style. To that end, we developed an ESLint configuration that encapsulates Enact programming conventions. Most modern editors have support for displaying linter errors in-line with source code. This can be very helpful during development. The configuration offers two flavors: strict and regular.

This document describes how to use the Enact ESLint configuration and how to set up ESLint with various editors.

Analyzing Your Code

Command Line

If you use the cli tools to create your project, npm run lint will run the Enact configuration of ESLint for syntax analysis.

If you want to switch to the strict version of the linting rules, modify your package.json file and change the following lines:

    "lint": "enact lint",
...
  "eslintConfig": {
    "extends": "enact-proxy"
  },

to read:

    "lint": "enact lint --strict",
...
  "eslintConfig": {
    "extends": "enact-proxy/strict"
  },

If you are not using the cli tools, you can create (or modify) an .eslintrc in the project’s root and run eslint .:

{
  "extends": "enact-proxy"
}

NOTE: For strict mode, use "extends": "enact-proxy/strict".

If you like our linting rules and want to use them by default you can create the .eslintrc file in your HOME directory instead.

In-editor

This section describes the procedure for setting up several popular editors.

You would need to install an ESLint plugin for your editor first.

Ever since ESLint 6, global installs of ESLint configs are no longer supported. To work around this new limitation, while still supporting in-editor linting, we’ve created a new eslint-config-enact-proxy package. The eslint-config-enact-proxy acts like a small proxy config, redirecting ESLint to use a globally-installed Enact ESLint config. eslint-config-enact-proxy needs to be installed locally on a project to enable in-editor linting:

npm install --save-dev eslint-config-enact-proxy

Also, you need to modify eslintConfig property in package.json:

  "eslintConfig": {
    "extends": "enact-proxy"
  },

NOTE: For strict mode, use "extends": "enact-proxy/strict".

In order for in-editor linting to work with our updated ESLint config, you’ll need to upgrade to ESLint 7 or later. This can be installed globally by running:

npm install -g eslint

Then, you will need to uninstall any previous globally-installed Enact linting package (everything but eslint itself):

npm uninstall -g eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel @babel/eslint-parser eslint-plugin-jest eslint-plugin-enact eslint-config-enact

Each editor requires a slightly different setup. Jump to the section relevant to your editor.

NOTE: If you happen to have in-editor linting set up already using JSHint or another tool, be sure to disable it as older linters sometimes get confused with newer ES6+ syntax and will not take advantage of the Enact linting rules.

Atom

From the shell/command prompt, issue the following command to install linter-eslint:

apm install linter-eslint

After the installation go to Preferences, then click on Packages. Navigate down to linter-eslint and click Settings. Make sure that the Use global ESLint installation option is checked and that you have correctly configured the path to the node installation within Atom.

Sublime Text

Install the SublimeLinter-eslint plugin, which depends on SublimeLinter 3.

Vim

First install Syntastic and then enable the eslint option:

" syntastic
let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 0
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:syntastic_mode_map = {
        \ "mode": "active",
        \ "active_filetypes": ["javascript"]}

Unfortunately, Syntastic does not support real-time linting and only lints on save/load.

NOTE: You may also wish to install vim-jsx as well.

Visual Studio Code

Install the vscode-eslint plugin. More information on linters and Visual Studio Code can be found here.

WebStorm

In either the default or per-project preferences, go to Languages & Frameworks > JavaScript > Code Quality > ESLint. Check the Enable checkbox. Ensure that the proper paths for node and eslint are configured.

Troubleshooting

If in-editor linting is not working in your local project, be sure you set up package.json or .eslintrc as described above.