@liferay/eslint-plugin

An ESLint plugin that helps enforce the Liferay Frontend Guidelines.

Overview

Preset	Extends	Description
general	eslint:recommended, prettier	Base configuration, suitable for general projects
react	general	general, plus rules from eslint-plugin-react and react-hooks, suitable for projects that use React
metal	react	Like react, but turns off rules that cause false positives in Metal components
portal	react	Default for projects inside liferay-portal itself

Installation

$ npm install --save-dev eslint @liferay/eslint-plugin

Coming from @liferay/eslint-config?

If you previously used @liferay/eslint-config, upgrading to use this plugin is very simple. All of the same rules apply, you just need to update your .eslintrc to include the plugin and specify which preset you are using.

$ npm install --save-dev @liferay/eslint-plugin

module.exports = {
	plugins: ['@liferay'],
	extends: ['plugin:@liferay/general'],
};

Usage

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

module.exports = {
	plugins: ['@liferay'],
	extends: ['plugin:@liferay/general'],
};

This preset provides a reasonable starting point for an independent open source project. You can also specify plugin:@liferay/react, plugin:@liferay/metal, or plugin:@liferay/portal.

liferay-portal

In liferay-portal itself we extend the @liferay/portal preset instead, which activates some rules specific to liferay-portal. This preset assumes the use of React, and also provides a set of custom rules that are described in detail in the @liferay/portal section below.

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 only lightly checked by ESLint, because JSP is an impoverished environment where we have to work with context-free snippets of text as opposed to fully-formed, valid JS modules. Our long-term strategy is to move as much code as possible out of JSP and into React components, but in the interim, please be aware that the level of safety provided by the linter inside JSP is greatly reduced.

React

For React projects outside of liferay-portal, you can extend @liferay/react instead:

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

metal-jsx

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

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

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

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 @lifeary/eslint-plugin itself) and configuring the rule:

const path = require('path');

module.exports = {
	plugins: ['@liferay'],
	extends: ['plugin:@liferay/general'],
	rules: {
		'notice/notice': [
			'error',
			{
				templateFile: path.join(__dirname, 'copyright.js'),
			},
		],
	},
};

Explicit configuration is required in order to make overrides possible; for example:

• top-level/
  • .eslintrc.js
  • copyright.js
  • mid-level/
    • .eslintrc.js
    • copyright.js
    • bottom-level/
      • .eslintrc.js

If we were to provide configuration by default, then if bottom-level/.eslintrc.js does an extends: ['plugin:@liferay/general'], then the default configuration would be considered more local than the one provided by mid-level, causing the wrong copyright.js to be used.

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/deprecation	@liferay/portal	#55
@liferay/portal/no-explicit-extend	@liferay/portal	#54
@liferay/portal/no-global-fetch	@liferay/portal	#62
@liferay/portal/no-loader-import-specifier	@liferay/portal	#122
@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/array-is-array	@liferay	#139
@liferay/destructure-requires	@liferay	#94
@liferay/empty-line-between-elements	@liferay	#94
@liferay/expect-assert	@liferay	#94
@liferay/group-imports	@liferay	#60
@liferay/import-extensions	@liferay	#137
@liferay/imports-first	@liferay	#60
@liferay/no-abbreviations	@liferay	#437
@liferay/no-absolute-import	@liferay	#60
@liferay/no-anonymous-exports	@liferay	#60
@liferay/no-arrow	@liferay	#179
@liferay/no-conditional-object-keys	@liferay	#108
@liferay/no-duplicate-class-names	@liferay	#108
@liferay/no-duplicate-imports	@liferay	#60
@liferay/no-dynamic-require	@liferay	#60
@liferay/no-get-data-attribute	@liferay	#60
@liferay/no-it-should	@liferay	#43
@liferay/no-length-jsx-expression	@liferay	#94
@liferay/no-require-and-call	@liferay	#94
@liferay/no-typeof-object	@liferay	#94
@liferay/no-use-strict-in-module	@liferay	#94
@liferay/padded-test-blocks	@liferay	#75
@liferay/prefer-length-check	@liferay	#75
@liferay/ref-name-suffix	@liferay	#60
@liferay/sort-class-names	@liferay	#108
@liferay/sort-import-destructures	@liferay	#124
@liferay/sort-imports	@liferay	#60
@liferay/trim-class-names	@liferay	#108
@liferay/use-state-naming-pattern	@liferay	#108
no-console	@liferay	#79
no-eval	@liferay	#432
no-for-of-loops/no-for-of-loops (default: off)	@liferay	#30
no-only-tests/no-only-tests	@liferay	#22
no-restricted-globals	@liferay/portal	#109
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/forbid-foreign-prop-types	@liferay/react	#301
react/jsx-curly-brace-presence	@liferay/react	#421
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
spaced-comment	@liferay	#225

Custom rules

@liferay

The bundled @liferay plugin includes the following rules:

• @liferay/array-is-array: Enforces (and autofixes) the use of Array.isArray() over instanceof Array.
• @liferay/destructure-requires: Enforces (and autofixes) that require statements use destructuring.
• @liferay/empty-line-between-elements: Enforces (and autofixes) a missing empty line between sibling elements.
• @liferay/expect-assert: Enforces that every expect() should assert something.
• @liferay/group-imports: Enforces (and autofixes) import and require grouping.
• @liferay/import-extensions: Enforces consistent usage/omission of file extensions in imports.
• @liferay/imports-first: Enforces that imports come first in the file.
• @liferay/no-abbreviations: Enforces the use of the expanded word if it finds a registered abbreviation in an identifier.
• @liferay/no-absolute-import: Enforces that imports do not use absolute paths.
• @liferay/no-anonymous-exports: Enforce the use of named function for export instead of arrow function.
• @liferay/no-arrow: Bans arrow functions (for IE; not on by default).
• @liferay/no-conditional-object-keys: Enforces that engineers don't use a truthy or falsy value that Object.keys() can return.
• @liferay/no-duplicate-class-names: Enforces (and autofixes) uniqueness of class names inside JSX className attributes.
• @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-get-data-attribute: Enforces the use of dataset instead of getAttribute().
• @liferay/no-it-should: Enforces that it() descriptions start with a verb, not with "should".
• @liferay/no-length-jsx-expression: Enforces that JSX expressions that check against length should make sure 0 isn't rendered".
• @liferay/no-require-and-call: Enforces that the result of a require() call at the top level is not immediately called.
• @liferay/no-typeof-object: Enforces the explicit check against null instead of checking for type.
• @liferay/no-use-strict-in-module: Bans the use of 'use strict'; inside modules.
• @liferay/padded-test-blocks: Enforces blank lines between test blocks (it() etc).
• @liferay/prefer-length-check: Bans the use of binary expressions, and instead enforces using member expression.
• @liferay/ref-name-suffix: This rule enforces (and autofixes) useRef hooks from React so that the variable name is suffixed with Ref.
• @liferay/sort-class-names: Enforces (and autofixes) ordering of class names inside JSX className attributes.
• @liferay/sort-import-destructures: Enforces (and autofixes) ordering of destructured names in import statements.
• @liferay/sort-imports: Enforces (and autofixes) import and require ordering.
• @liferay/trim-class-names: Enforces (and autofixes) that class names inside JSX className attributes do not have leading or trailing whitespace.
• @liferay/use-state-naming-pattern: Enforces (and autofixes) that destructured values from useState follow the pattern [val, setVal](val can be anything).

@liferay/portal

The bundled @liferay/portal plugin includes the following rules:

• @liferay/portal/deprecation: Enforces standard formatting of @deprecated annotations.
• @liferay/portal/no-document-cookie: Prevents saving and reading cookies without user consent.
• @liferay/portal/no-explicit-extend: Prevents unnecessary extensions in ESLint and Babel configuration files.
• @liferay/portal/no-global-fetch: Prevents usage of unwrapped fetch to avoid possible issues related to security misconfiguration.
• @liferay/portal/no-global-storage: Prevents usage of unwrapped local/sessionStorage to avoid storing data without consent.
• @liferay/portal/no-loader-import-specifier: Ensures that ".scss" files imported via the loader are used only for side-effects.
• @liferay/portal/no-localhost-reference: Enforces that no code should explicitly reference localhost as a literal value.
• @liferay/portal/no-metal-plugins: Prevents usage of deprecated metal-* plugins and utilities.
• @liferay/portal/no-react-dom-create-portal: Prevents the direct use of the ReactDOM.createPortal API.
• @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.

@liferay/aui

The bundled @liferay/aui plugin includes the following rules:

• @liferay/aui/no-all: Prevents usage of A.all().
• @liferay/aui/no-array: Prevents usage of A.Array.
• @liferay/aui/no-each: Prevents usage of A.each().
• @liferay/aui/no-get-body: Prevents usage of A.getBody().
• @liferay/aui/no-io: Prevents usage of A.io().
• @liferay/aui/no-merge: Prevents usage of A.merge().
• @liferay/aui/no-modal: Prevents usage of A.Modal().
• @liferay/aui/no-node: Prevents usage of A.Node().
• @liferay/aui/no-object: Prevents usage of A.Object.
• @liferay/aui/no-one: Prevents usage of A.one().
• @liferay/aui/no-url: Prevents usage of A.Url().

License

MIT