@lexical/eslint-plugin
Advanced tools
@lexical/eslint-pluginThis ESLint plugin enforces the Lexical $function convention.
Assuming you already have ESLint installed, run:
npm install @lexical/eslint-plugin --save-dev
Then extend the recommended eslint config:
{
"extends": [
// ...
"plugin:@lexical/recommended"
]
}
If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:
{
"plugins": [
// ...
"@lexical"
],
"rules": {
// ...
"@lexical/rules-of-lexical": "error"
}
}
Most of the heuristics in @lexical/rules-of-lexical can be extended with
additional terms or patterns.
The code example below is shown using the default implementations for each option. When you configure these they are combined with the default implementations using "OR", the default implementations can not be overridden. These terms and patterns are only shown for reference and pasting this example into your project is not useful.
If the string begins with a "^" or "(" then it is treated as a RegExp,
otherwise it will be an exact match. A string may also be used instead
of an array of strings.
{
"plugins": [
// ...
"@lexical"
],
"rules": {
// ...
"@lexical/rules-of-lexical": [
"error",
{
"isDollarFunction": ["^\\$[a-z_]"],
"isIgnoredFunction": [],
"isLexicalProvider": [
"parseEditorState",
"read",
"registerCommand",
"registerNodeTransform",
"update"
],
"isSafeDollarFunction": ["^\\$is"]
}
]
}
}
isDollarFunctionBase case: /^\$[a-z_]/
This defines the $function convention, which by default is any function that
starts with a dollar sign followed by a lowercase latin letter. You may have a
secondary convention in your codebase, such as non-latin letters, or an
internal prefix that you want to consider (e.g. "^INTERNAL_\\$").
isIgnoredFunctionBase case: None
Functions that match these patterns are ignored from analysis, they may call Lexical $functions but are not considered to be a dollar function themselves.
isLexicalProviderBase case: /^(parseEditorState|read|registerCommand|registerNodeTransform|update)$/
These are functions that allow their function argument to use Lexical $functions.
isSafeDollarFunctionBase case: /^\$is/
These $functions are considered safe to call from anywhere, generally these functions are runtime type checks that do not depend on any other state.
$functions may be called by other $functions
function $namedCorrectly() {
return $getRoot();
}
$functions may be called in functions defined when calling the following methods (the heuristic only considers the method name):
editor.updateeditorState.readeditor.registerCommandeditor.registerNodeTransformfunction validUsesEditorOrState(editor) {
editor.update(() => $getRoot());
editor.getLatestState().read(() => $getRoot());
}
$functions may be called from class methods
class CustomNode extends ElementNode {
appendText(string) {
this.appendChild($createTextNode(string));
}
}
function invalidFunction() {
return $getRoot();
}
function $callsInvalidFunction() {
return invalidFunction();
}
Autofix: The function is renamed with a $ prefix. Any references to this name in this module are also always renamed.
function $invalidFunction() {
return $getRoot();
}
function $callsInvalidFunction() {
return $invalidFunction();
}
export function exportedInvalidFunction() {
return $getRoot();
}
Autofix: The exported function is renamed with a $ prefix. The previous name is also exported and marked deprecated, because automatic renaming of references to that name is limited to the module's scope.
export function $exportedInvalidFunction() {
return $getRoot();
}
/** @deprecated renamed to {@link $exportedInvalidFunction} by @lexical/eslint-plugin rules-of-lexical */
export const exportedInvalidFunction = $exportedInvalidFunction;
import {$getRoot} from 'lexical';
function InvalidComponent() {
const [editor] = useLexicalComposerContext();
const getRoot = useCallback(() => $getRoot(), []);
return (<button onClick={() => editor.update(() => getRoot())} />);
}
Autofix: The function is renamed with a $ prefix and _ suffix since the suggested name was already in scope.
import {$getRoot} from 'lexical';
function InvalidComponent() {
const [editor] = useLexicalComposerContext();
const $getRoot_ = useCallback(() => $getRoot(), []);
return (<button onClick={() => editor.update(() => $getRoot_())} />);
}
v0.20.2 (2024-11-30)
FAQs
Lexical specific linting rules for ESLint
The npm package @lexical/eslint-plugin receives a total of 5,107 weekly downloads. As such, @lexical/eslint-plugin popularity was classified as popular.
We found that @lexical/eslint-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.