liferay-continuous-integration/eslint-config-liferay

ESLint shareable config for the Liferay JavaScript Style

eslint-config-liferay

ESLint shareable config for the Liferay JavaScript style guide.

Installation

$ npm install --save-dev eslint eslint-config-liferay

Usage

Once the eslint-config-liferay package is installed, you can use it by specifying liferay in the extends section of your ESLint configuration.

module.exports = {
	extends: ['liferay'],
};

React

For React projects, you can extend liferay/react instead:

module.exports = {
	extends: ['liferay/react'],
};

metal-jsx

For legacy projects inside liferay-portal that use metal-jsx, we have a "metal" preset:

module.exports = {
	extends: ['liferay/metal'],
};

Use this preset to stop ESLint from spuriously warning that variables that are used as JSX components are unused.

liferay-portal

In liferay-portal itself we extend the liferay/portal preset instead, which activates some additional rules specific to liferay-portal. See the eslint-plugin-liferay-portal section below for more details.

This extension is applied automatically by liferay-npm-scripts, so you don't have to configure it explicitly.

An important disclaimer about the use of ESLint in liferay-portal

JavaScript code that appears inline inside JSP files and other templates is not currently checked by ESLint. Our long-term strategy is to move as much code as possible out of JSP and into React components, but in the interim, our only option is to rely on liferay-portal's existing source formatter for those files.

Copyright headers

The included eslint-plugin-notice plug-in can be used to enforce the use of uniform copyright headers across a project by placing a template named copyright.js in the project root (for example, see the file defining the headers used in eslint-config-liferay itself).

Base rules

Rule or preset	Where we use it	Notes
eslint-config-prettier	liferay	Preset that turns off ESLint rules that conflict with Prettier
eslint:recommended	liferay	Preset bundled with ESLint
default-case	liferay	#30
liferay-portal/no-explicit-extend	liferay/portal	#54
liferay-portal/no-global-fetch	liferay/portal	#62
liferay-portal/no-metal-plugins	liferay/portal	#61
liferay-portal/no-react-dom-render	liferay/portal	#71
liferay-portal/no-side-navigation	liferay/portal	#44
liferay/destructure-requires	liferay	#94
liferay/group-imports	liferay	#60
liferay/imports-first	liferay	#60
liferay/no-absolute-import	liferay	#60
liferay/no-duplicate-imports	liferay	#60
liferay/no-dynamic-require	liferay	#60
liferay/no-it-should	liferay	#43
liferay/no-require-and-call	liferay	#94
liferay/padded-test-blocks	liferay	#75
liferay/sort-imports	liferay	#60
no-console	liferay	#79
no-for-of-loops/no-for-of-loops	liferay	#30
no-only-tests/no-only-tests	liferay	#22
no-return-assign	liferay	#30
no-unused-expressions	liferay	#19
no-unused-vars	liferay	#30
notice/notice	liferay	#26
object-shorthand	liferay	#30
prefer-const	liferay	#30
quote-props	liferay	#30
radix	liferay	#66
react-hooks/exhaustive-deps	liferay/react	Rules of Hooks
react-hooks/rules-of-hooks	liferay/react	Rules of Hooks
react/jsx-fragments	liferay/react	#58
react/jsx-key	liferay/react	#42
react/jsx-no-comment-textnodes	liferay/react	#42
react/jsx-no-duplicate-props	liferay/react	#42
react/jsx-no-undef	liferay/react	#42
react/jsx-sort-props	liferay/react	#58
react/jsx-uses-react	liferay/react	#42
react/jsx-uses-vars	liferay/react, liferay/metal	#42, #50
react/no-children-prop	liferay/react	#42
react/no-danger-with-children	liferay/react	#42
react/no-direct-mutation-state	liferay/react	#42
react/no-is-mounted	liferay/react	#42
react/no-render-return-value	liferay/react	#42
react/no-string-refs	liferay/react	#42
react/no-unescaped-entities	liferay/react	#42
react/no-unknown-property	liferay/react	#42
react/require-render-return	liferay/react	#42
sort-destructure-keys/sort-destructure-keys	liferay	#60
sort-keys	liferay	#63

Custom rules

eslint-plugin-liferay

The bundled eslint-plugin-liferay plugin includes the following rules:

• liferay/destructure-requires: Enforces (and autofixes) that require statements use destructuring.
• liferay/group-imports: Enforces (and autofixes) import and require grouping.
• liferay/imports-first: Enforces that imports come first in the file.
• liferay/no-absolute-import: Enforces that imports do not use absolute paths.
• liferay/no-duplicate-imports: Enforces at most one import of any given module per file.
• liferay/no-dynamic-require: Enforces that require() calls use static arguments.
• liferay/no-it-should: Enforces that it() descriptions start with a verb, not with "should".
• liferay/no-require-and-call: Enforces that the result of a require() call at the top level is not immediately called.
• liferay/padded-test-blocks: Enforces blank lines between test blocks (it() etc).
• liferay/sort-imports: Enforces (and autofixes) import and require ordering.

eslint-plugin-liferay-portal

The bundled eslint-plugin-liferay-portal plugin includes the following rules:

• liferay-portal/no-global-fetch: Prevents usage of unwrapped fetch to avoid possible issues related to security misconfiguration.
• liferay-portal/no-explicit-extend: Prevents unnecessary extends: ["liferay/portal"] configuration.
• liferay-portal/no-metal-plugins: Prevents usage of deprecated metal-* plugins and utilities.
• liferay-portal/no-react-dom-render: Prevents direct usage of ReactDOM.render in favor of our wrapper.
• liferay-portal/no-side-navigation: Guards against the use of the legacy jQuery sideNavigation plugin.

License

MIT