title |
---|
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.
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.
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.
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.
Install the SublimeLinter-eslint plugin, which depends on SublimeLinter 3.
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.
Install the vscode-eslint plugin. More information on linters and Visual Studio Code can be found here.
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.
If in-editor linting is not working in your local project, be sure you set up package.json
or .eslintrc
as described above.