@jsenv/eslint-config
v16.5.4
Published
Create ESLint configuration for any project
Downloads
945
Readme
eslint-config
ESLint config file consists into a single big object. This package allows to split this object to compose and reuse them.
- :+1: Part of configuration that belongs together can be regrouped
- :+1: ESLint configuration is easier to read
This is achieved by a function capable to compose subsets of ESLint configuration.
composeEslintConfig
composeEslintConfig is a function returning an eslint config object being the composition of eslint config objects passed in arguments.
const {
composeEslintConfig,
eslintConfigBase,
} = require("@jsenv/eslint-config");
const eslintConfig = composeEslintConfig(
eslintConfigBase,
// first "group": enable html plugin
{
plugins: ["html"],
settings: {
extensions: [".html"],
},
},
// second "group": enable react plugin
{
plugins: ["react"],
settings: {
extensions: [".jsx"],
},
},
);
module.exports = eslintConfig;
Composable eslint configs
| ESLint config | Description |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| eslintConfigBase | Enable latest js features |
| eslintConfigForPrettier | Disable eslint rules already handled by prettier |
| eslintConfigToPreferExplicitGlobals | Force code to use global variables explicitly; like window.event
|
Advanced configuration example
The following code is meant to be put into an .eslintrc.cjs file and does the following:
- Reuse jsenv configuration for ESLint rules
- Use ESLint import plugin with a custom resolver
- Consider files as written for node by default
- Consider a subset of files as written for browsers
- Use html plugin to enable linting of html files
- Disable ESLint rules already handled by prettier
const {
composeEslintConfig,
eslintConfigBase,
jsenvEslintRules,
jsenvEslintRulesForImport,
eslintConfigToPreferExplicitGlobals,
eslintConfigForPrettier,
} = require("@jsenv/eslint-config");
const eslintConfig = composeEslintConfig(
eslintConfigBase,
{
rules: {
...jsenvEslintRules,
"operator-assignment": ["error", "always"], // override jsenv rules
},
},
// import plugin
{
plugins: ["import"],
settings: {
"import/resolver": {
"@jsenv/eslint-import-resolver": {
rootDirectoryUrl: __dirname,
packageConditions: ["node", "import"],
},
},
"import/extensions": [".js", ".mjs"],
},
rules: jsenvEslintRulesForImport,
},
// files are written for Node.js by default
{
env: {
node: true,
},
},
// package is "type": "module" so:
// 1. disable commonjs globals by default
// 2. Re-enable commonjs into *.cjs files
{
globals: {
__filename: "off",
__dirname: "off",
require: "off",
exports: "off",
},
overrides: [
{
files: ["**/*.cjs"],
env: {
commonjs: true,
},
// inside *.cjs files. restore commonJS "globals"
globals: {
__filename: true,
__dirname: true,
require: true,
exports: true,
},
},
],
},
// several files are written for browsers, not Node.js
{
overrides: [
{
files: ["**/**/*.html", "**/src/**/*.js"],
env: {
browser: true,
node: false,
},
settings: {
"import/resolver": {
"@jsenv/eslint-import-resolver": {
rootDirectoryUrl: __dirname,
packageConditions: ["browser", "import"],
},
},
},
},
],
},
// html plugin
{
plugins: ["html"],
settings: {
extensions: [".html"],
},
},
eslintConfigToPreferExplicitGlobals,
// We are using prettier, disable all eslint rules
// already handled by prettier.
eslintConfigForPrettier,
);
module.exports = eslintConfig;
The above configuration uses @jsenv/eslint-import-resolver to resolve import so it needs to be installed.
npm install --save-dev @jsenv/eslint-import-resolver
Composable ESLint rules
| Rules | Description | | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | jsenvEslintRules | jsenv rules for ESLint | | jsenvEslintRulesForImport | jsenv rules for eslint-plugin-import | | jsenvEslintRulesForReact | jsenv rules for project using react and eslint-plugin-react |
Common use cases
Top level await
It will be supported by default in ESLint 8. Until then you need:
"@babel/eslint-parser"
and"@babel/core"
in your devDependencies- Configure ESLint parser to
"@babel/eslint-parser"
npm install --save-dev @babel/eslint-parser
npm install --save-dev @babel/core
.eslintrc.cjs:
const {
composeEslintConfig,
eslintConfigBase,
} = require("@jsenv/eslint-config");
const eslintConfig = composeEslintConfig(
eslintConfigBase,
// use "@babel/eslint-parser" until top level await is supported by ESLint default parser
{
parser: "@babel/eslint-parser",
parserOptions: {
requireConfigFile: false,
},
},
);
module.exports = eslintConfig;
React
const {
composeEslintConfig,
eslintConfigBase,
jsenvEslintRulesForReact,
} = require("@jsenv/eslint-config");
const eslintConfig = composeEslintConfig(
eslintConfigBase,
// react
{
plugins: ["react"],
settings: {
react: {
version: "detect",
},
},
rules: jsenvEslintRulesForReact,
},
);
module.exports = eslintConfig;
JSX
"@babel/eslint-parser"
and"@babel/plugin-syntax-jsx"
in your devDependencies- Enable
@babel/plugin-syntax-jsx
in babel config file - Configure ESLint parser to
"@babel/eslint-parser"
npm install --save-dev @babel/eslint-parser
npm install --save-dev @babel/plugin-syntax-jsx
babel.config.cjs:
const babelPluginSyntaxJSX = require("@babel/plugin-syntax-jsx");
module.exports = {
plugins: [
[
babelPluginSyntaxJSX,
{
pragma: "React.createElement",
pragmaFrag: "React.Fragment",
},
],
],
};
.eslintrc.cjs:
const {
composeEslintConfig,
eslintConfigBase,
jsenvEslintRulesForReact,
} = require("@jsenv/eslint-config");
const eslintConfig = composeEslintConfig(
eslintConfigBase,
// jsx
{
parser: "@babel/eslint-parser",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
settings: {
extensions: [".jsx"],
},
},
);
module.exports = eslintConfig;
HTML in VSCode
In ".vscode/settings.json"
file, add
"eslint.validate": ["javascript", "html"]