itgalaxyeslint-plugin-itgalaxy
Itgalaxy’s ESLint rules and configs.
Installation
You'll first need to install ESLint:
$ npm i eslint --save-devNext, install eslint-plugin-itgalaxy:
$ npm install eslint-plugin-itgalaxy --save-devNote: 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-devBy 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"]
}- 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.jsprojects (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
reactprojects.
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
JavaScriptinHTML(andHTMLbased) 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
JavaScriptinmarkdownfiles.
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",
],
};Examples
CommonJS
.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,
};ECMA modules
.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,
};Application with ECMA modules and react
"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,
};