eslint-plugin-itgalaxy
Itgalaxy’s ESLint rules and configs.
Installation
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.
Usage
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",
],
};
Provided configurations
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"]
}
Example of configuration:
{
"extends": ["plugin:itgalaxy/script"]
}
Example of configuration:
{
"extends": ["plugin:itgalaxy/module"]
}
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";
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 for require
/import
, see above presets).
Preset contains environment and rules for Node.js
code.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"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",
"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",
"plugin:itgalaxy/module",
],
};
- react: Use this for
react
projects.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/react",
],
};
- html: Allow linting
JavaScript
in HTML
(and HTML
based) files.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/html",
],
};
- markdown: Allow linting
JavaScript
in markdown
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",
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/markdown",
],
};
- AVA: Use this for projects that use the AVA.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/ava",
],
};
- Jest: Use this for projects that use the Jest.
Please read this ecmascript-modules
for using jest with ECMA modules.
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/jest",
],
};
Example of configuration:
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/module",
"plugin:itgalaxy/node",
"plugin:itgalaxy/jsdoc-typescript",
],
};
Examples
CommonJS
.eslintrc.js
"use strict";
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/commonjs",
"plugin:itgalaxy/node",
"plugin:itgalaxy/jest",
"plugin:itgalaxy/markdown",
],
root: true,
};
ECMA modules
.eslintrc.js
export default {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/module",
"plugin:itgalaxy/node",
"plugin:itgalaxy/jest",
"plugin:itgalaxy/markdown",
],
root: true,
};
Application with ECMA modules and react
"use strict";
module.exports = {
extends: [
"plugin:itgalaxy/esnext",
"plugin:itgalaxy/commonjs",
"plugin:itgalaxy/jest",
"plugin:itgalaxy/markdown",
],
overrides: [
{
files: ["src/**/*.[jt]s?(x)"],
extends: [
"plugin:itgalaxy/module",
"plugin:itgalaxy/browser",
"plugin:itgalaxy/react",
],
env: {
},
},
{
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,
};