/eslint-config-liferay

ESLint shareable config for the Liferay JavaScript Style

Primary LanguageJavaScriptMIT LicenseMIT

⚠️ The eslint-config-liferay package will be deprecated and this repo archived (ie. switched to read-only mode). Development will continue in the @liferay/eslint-config package and in liferay/liferay-frontend-projects monorepo.


eslint-config-liferay

An ESLint shareable config that helps enforce the Liferay Frontend Guidelines.

Overview

Preset Extends Description
liferay eslint:recommended, prettier Base configuration, suitable for general projects
react liferay liferay, 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 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'],
};

This preset provides a reasonable starting point for an independent open source project.

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 eslint-plugin-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 = {
	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.

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) and configuring the rule:

const path = require('path');

module.exports = {
	extends: ['liferay'],
	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: ['liferay'], 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/group-imports liferay #60
liferay/import-extensions liferay #137
liferay/imports-first liferay #60
liferay/no-absolute-import liferay #60
liferay/no-arrow liferay #179
liferay/no-duplicate-class-names liferay #108
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
liferay/sort-import-destructures liferay #124
liferay/sort-class-names liferay #108
liferay/trim-class-names liferay #108
no-console liferay #79
no-for-of-loops/no-for-of-loops 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-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:

eslint-plugin-liferay-portal

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

License

MIT