Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@jsenv/eslint-config

Package Overview
Dependencies
0
Maintainers
2
Versions
49
Issues
File Explorer

Advanced tools

@jsenv/eslint-config

Create ESLint configuration for any project

    16.0.9latest

Version published
Maintainers
2
Yearly downloads
13,486
increased by32.72%

Weekly downloads

Readme

Source

eslint-config npm package github main codecov coverage

ESLint config file consists into a single big object. This package helps to split this big object into smaller objects. This is possible thanks to a function capable to compose objects together to obtain a final object needed to configure ESLint.

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 configDescription
eslintConfigBaseEnable latest js features
eslintConfigForPrettierDisable eslint rules already handled by prettier
eslintConfigToPreferExplicitGlobalsForce explicit code to use global variables like window.event

Advanced configuration example

The following code is meant to be put into an .eslintrc.cjs file and does the following:

  1. Reuse jsenv configuration for ESLint rules
  2. Disable ESLint rules already handled by prettier
  3. Use ESLint import plugin with a custom resolver
  4. Use html plugin to enable linting of html files
  5. Consider files as written for browsers by default
  6. Consider a subset of files as written for Node.js
const { composeEslintConfig, eslintConfigBase, eslintConfigForPrettier, jsenvEslintRules, jsenvEslintRulesForImport, } = require("@jsenv/eslint-config") const eslintConfig = composeEslintConfig( eslintConfigBase, { rules: { ...jsenvEslintRules, "operator-assignment": ["error", "always"], // override jsenv rules }, }, eslintConfigForPrettier, // import plugin { plugins: ["import"], settings: { "import/resolver": { ["@jsenv/importmap-eslint-resolver"]: { projectDirectoryUrl: __dirname, importMapFileRelativeUrl: "./import-map.importmap", }, }, }, rules: jsenvEslintRulesForImport, }, // html plugin { plugins: ["html"], settings: { extensions: [".html"], }, }, // files are written for browsers by default { env: { browser: true, }, }, // some files are written for node in ESM { overrides: [ { files: ["**/*.mjs"], env: { browser: false, node: true, }, globals: { __filename: "off", __dirname: "off", require: "off", exports: "off", }, settings: { "import/resolver": { [importResolverPath]: { node: true, }, }, }, }, ], }, // some files are written for node in CommonJS { overrides: [ { files: ["**/*.cjs"], env: { browser: false, node: true, }, globals: { __filename: true, __dirname: true, require: true, exports: true, }, settings: { "import/resolver": { [importResolverPath]: { node: true, }, }, }, }, ], }, ) module.exports = eslintConfig

Composable ESLint rules

RulesDescription
jsenvEslintRulesjsenv rules for ESLint
jsenvEslintRulesForImportjsenv rules for eslint-plugin-import
jsenvEslintRulesForReactjsenv 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:

  1. "@babel/eslint-parser" and "@babel/core" in your devDependencies
  2. 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

  1. "@babel/eslint-parser" and "@babel/plugin-syntax-jsx" in your devDependencies
  2. Enable @babel/plugin-syntax-jsx in babel config file
  3. 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"]
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc