Itgalaxy’s ESLint rules and configs.
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-itgalaxy
:
$ npm install eslint-plugin-itgalaxy --save-dev
Note: If you installed ESLint globally (using the -g
flag) then you must also install eslint-plugin-itgalaxy
globally.
Note: Some presets require additional dependencies (plugins).
Example markdown
require eslint-plugin-markdown
plugin.
So you need run:
$ npm install eslint-plugin-markdown --save-dev
By default all additional plugins listed in peerDependencies
(this allows you to track non-compatibility with old versions), just ignore warnings if you don't need a plugin.
Itgalaxy’s ESLint configs come bundled in this package. In order to use them, you simply extend the relevant configuration in your project’s .eslintrc
.
Configurations do not contain stylistic rules, we use prettier for this purpose.
Better use prettier
directly (using npm
/yarn
command), because it is allow to format css
, scss
, markdown
, json
and etc.
For example, the following will extend the ESNext (ES2020 and later) config:
module.exports = {
extends: [
"plugin:itgalaxy/module",
"plugin:itgalaxy/node",
"plugin:itgalaxy/esnext",
],
};
React:
module.exports = {
extends: [
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/react",
],
};
This plugin provides the following core configurations:
-
script: preset for environment without
require
/import
(old browsers or custom env).
Example of configuration:
{
"extends": ["plugin:itgalaxy/script"]
}
-
commonjs: preset for CommonJS modules (
require
/module.exports
/etc).
Example of configuration:
{
"extends": ["plugin:itgalaxy/script"]
}
-
module: preset for ECMAScript modules (
import
/export
/etc).
Example of configuration:
{
"extends": ["plugin:itgalaxy/module"]
}
-
dirty: preset for mixed code containing CommonJS modules and ECMAScript modules (
require
/module.exports
/require
/export
/etc).
Example of configuration:
{
"extends": ["plugin:itgalaxy/dirty"]
}
Why? Very often you are faced with writing or having code using ECMAScript and CommonJS modules, for example babel
allows you to do it, you should use this preset in this case.
But it is not recommended. Prefer to use plugin:itgalaxy/module
.
More information about
dirty
(unambiguous
).
Example of dirty
(unambiguous
) code:
import eslint from "eslint";
/**
* @param {string} configName Config name
* @returns {object} Config
*/
function loadConfig(configName) {
return require(`my-${configName}`);
}
console.log(__dirname);
console.log(__filename);
console.log(import.meta.url);
loadConfig("example");
-
node: use this for
Node.js
projects (preset contains only environments rules, i.e. no rules forrequire
/import
, see above presets).
Preset contains environment and rules for Node.js
code.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty"
"plugin:itgalaxy/module",
"plugin:itgalaxy/node",
],
};
- browser: use this for browser projects.
Preset contains environment and rules for browser code.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/script" for old browsers or custom enviroment, "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
],
};
- esnext: use this for anything written with ES2015+ features.
Contains most of the rules for linting code.
Does not contain rules for CommonJS and ECMA modules syntax, rules for require
/import
/module.export
/exports
/etc and environments (i.e. browser
/node
/etc).
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/script" for old browsers or custom enviroment, "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
],
};
-
react: Use this for
react
projects.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/react",
],
};
-
html: Allow linting
JavaScript
inHTML
(andHTML
based) files.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/html",
],
};
-
markdown: Allow linting
JavaScript
inmarkdown
files.
By default allows you to use import
and require
in documentation.
Also, all rules are related to no-unresolved
/no-unused
/unpublished
are disabled by default and you can use console.log(something)
.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/markdown",
],
};
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/ava",
],
};
Please read this ecmascript-modules
for using jest with ECMA modules.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/jest",
],
};
- jsdoc-typescript: Use this for projects that use JSDoc typescript.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
// You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
"plugin:itgalaxy/module",
"plugin:itgalaxy/node",
"plugin:itgalaxy/jsdoc-typescript",
],
};
.eslintrc.js
"use strict";
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/commonjs",
// Use "plugin:itgalaxy/browser" if you write code for browser or use them both if you write for both environments (you need bundler)
"plugin:itgalaxy/node",
"plugin:itgalaxy/jest",
// Lint documentation
"plugin:itgalaxy/markdown",
// Uncomment to use jsdoc typescript
// "plugin:itgalaxy/jsdoc-typescript",
],
root: true,
};
.eslintrc.js
export default {
extends: [
"plugin:itgalaxy/esnext",
// You can change this on "plugin:itgalaxy/dirty" if you use `node-babel`, bundler and have mixed code with `import` and `require`
"plugin:itgalaxy/module",
// Use "plugin:itgalaxy/browser" if you write code for browser or use them both if you write for both environments (you need bundler)
"plugin:itgalaxy/node",
"plugin:itgalaxy/jest",
// Lint documentation
"plugin:itgalaxy/markdown",
// Uncomment to use jsdoc typescript
// "plugin:itgalaxy/jsdoc-typescript",
],
root: true,
};
"use strict";
module.exports = {
// You can use "plugin:itgalaxy/module" and remove "plugin:itgalaxy/module", "plugin:itgalaxy/dirty" and "plugin:itgalaxy/script"
// if you use ECMA modules everywhere (preferable)
// Configuration files and scripts
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/commonjs",
"plugin:itgalaxy/jest",
// Lint documentation
"plugin:itgalaxy/markdown",
// Uncomment to use jsdoc typescript
// "plugin:itgalaxy/jsdoc-typescript",
],
overrides: [
// Source code of application
{
files: ["src/**/*.[jt]s?(x)"],
extends: [
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/react",
],
env: {
// Do you use `jquery`?
// jquery: true
},
},
// Tests and documentation
{
files: [
"**/{tests,test,__tests__}/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[jt]s?(x)",
"**/test-*.[jt]s?(x)",
"**/*.{md,markdown,mdown,mkdn,mkd,mdwn,mkdown,ron}/**",
],
extends: [
"plugin:itgalaxy/dirty",
"plugin:itgalaxy/node",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/react",
],
},
],
root: true,
};