website·Indexed 29 days ago
https://sudongyuer.github.io/learn-eslint/A comprehensive guide to ESLint, covering installation, configuration, and usage in React projects. The documentation includes detailed instructions on creating custom rules and plugins, understanding Abstract Syntax Trees (AST), integrating ESLint with editors like VS Code and WebStorm, and managing shared configurations and plugins.
ESLint uses two different mechanisms for sharing and extending linting logic:
eslint:recommended is a shared configuration that provides a baseline of standard rules.plugin/rule format./* eslint-disable */
alert('foo'); // All rules disabled
/* eslint-enable */
/* eslint-disable no-alert */
alert('bar'); // Only no-alert disabled for the rest of the file
alert('baz'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert, quotes
alert('qux');
foo(); // eslint-disable-line example/rule-nameTo enable automatic fixing for a custom ESLint rule, you must perform three key steps:
fixable property to the meta object of the rule definition to indicate that the rule supports automatic fixes.CallExpression for outdated function calls) within the rule's visitor function.fixer API provided in the context.report callback to define how the code should be transformed.Once implemented, these errors can be automatically resolved by running ESLint with the --fix flag.
# Run ESLint with the fix flag to automatically apply the custom rule's fixes
eslint --fixESLint provides two primary methods for configuration to allow flexible control over code linting:
.eslintrc.*) or an eslintConfig field in package.json to specify configuration for an entire directory and its subdirectories. ESLint automatically detects these files or reads the configuration specified via the command line.eslint:recommended) is loaded, ESLint applies all rules defined in that config. Developers can then add or override specific rules in the rules section of their own local configuration to customize the behavior.context API to inspect source code comments. The implementation involves using context.getSourceCode() to access the current file being parsed and sourceCode.getAllComments() to retrieve all comments within that file to check for the 'TODO' string.// Example logic for the custom rule
module.exports = {
create(context) {
return {
Program() {
const sourceCode = context.getSourceCode();
const comments = sourceCode.getAllComments();
comments.forEach(comment => {
if (comment.value.includes('TODO')) {
context.report({
node: comment,
message: 'Found a TODO comment that needs to be addressed.'
});
}
});
}
};
}
};node_modules (e.g., eslint-plugin-react). Once the plugin is loaded, you can specify and enable the custom rules exported by that plugin within your ESLint configuration.To create a shareable ESLint configuration that can be published to npm and used by other projects, follow these requirements:
eslint-config-xxx (e.g., eslint-config-my-company). This is a strict ESLint convention required for the configuration to be recognized.index.js file in the root of the package and export the ESLint configuration object from it.extends array in the .eslintrc file. When referencing the package in extends, omit the eslint-config- prefix and only provide the xxx part of the name.// In the shareable config package: index.js
module.exports = {
rules: {
'no-console': 'warn',
'semi': ['error', 'always'],
// other rules
}
};// In the consuming project: .eslintrc
{
"extends": "xxx"
}.eslintrc.*). Alternatively, configuration can be defined in the eslintConfig field of a package.json file or specified via the command line during execution.