ESLint Integration with VS Code
Learn how to integrate and configure ESLint in VS Code.
We'll cover the following...
Extending an ESLint configuration
Following are the steps to extend an ESLint configuration:
-
ESLint is now perfectly suited for
palindromes.js
, but if you try to run it againstpalindromes.test.js
, it won’t go well:$ npx eslint palindromes.test.js /Users/tburnham/code/test-driven-palindromes/palindromes.test.js 3:1 error 'describe' is not defined no-undef 4:3 error 'it' is not defined no-undef 5:5 error 'expect' is not defined no-undef ✖ 3 problems (3 errors, 0 warnings)
All of these problems share the same cause as the
module
kerfuffle earlier: ESLint doesn’t know thatpalindromes.test.js
will be running in an environment (Jest) wheredescribe
,it
, andexpect
are defined as globals. -
You could fix the problem with another
env
entry, but there’s a better way. Jest has an official ESLint plugin, eslint-plugin-jest, which comes with several rules for identifying common test code mistakes. Go ahead and add it to the project:$ npm install --save-dev eslint-plugin-jest@22.1.2 + eslint-plugin-jest@22.1.2
-
To apply the plugin, you need to make two changes to the ESLint configuration. First, register it in a
plugins
entry. And second, add its recommended configuration to theextends
entry:// .eslintrc.js module.exports = { plugins: ['jest'],