npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@liferay/eslint-plugin

v1.6.0

Published

ESLint plugin for the Liferay JavaScript Style

Downloads

3,585

Readme

@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/portal

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

@liferay/aui

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

License

MIT