Skip to content

Commit

Permalink
feat!: Rename FlatESLint to ESLint (#17914)
Browse files Browse the repository at this point in the history 
* feat!: Rename FlatESLint to ESLint

Refs # 13481

* Rename supporting types

* Update docs/src/use/migrate-to-9.0.0.md

---------

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
  • Loading branch information
@nzakas @mdjermanovic
nzakas and mdjermanovic committed Dec 29, 2023
1 parent 412dcbb commit cadfbcd
Show file tree
Hide file tree
Showing 15 changed files with 12,729 additions and 12,700 deletions.
49 changes: 25 additions & 24 deletions docs/_examples/integration-tutorial-code/example-eslint-integration.js
View file
@@ -1,51 +1,52 @@
/**
/**
* @fileoverview An example of how to integrate ESLint into your own tool
* @author Ben Perlmutter
*/

const { ESLint } = require("eslint");

// Create an instance of ESLint with the configuration passed to the function
function createESLintInstance(overrideConfig){
return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig, fix: true });
function createESLintInstance(overrideConfig) {
return new ESLint({
overrideConfigFile: true,
overrideConfig,
fix: true
});
}

// Lint the specified files and return the error results
async function lintAndFix(eslint, filePaths) {
const results = await eslint.lintFiles(filePaths);
const results = await eslint.lintFiles(filePaths);

// Apply automatic fixes and output fixed code
await ESLint.outputFixes(results);
// Apply automatic fixes and output fixed code
await ESLint.outputFixes(results);

return results;
return results;
}

// Log results to console if there are any problems
function outputLintingResults(results) {
// Identify the number of problems found
const problems = results.reduce((acc, result) => acc + result.errorCount + result.warningCount, 0);

if (problems > 0) {
console.log("Linting errors found!");
console.log(results);
} else {
console.log("No linting errors found.");
}
return results;
// Identify the number of problems found
const problems = results.reduce((acc, result) => acc + result.errorCount + result.warningCount, 0);

if (problems > 0) {
console.log("Linting errors found!");
console.log(results);
} else {
console.log("No linting errors found.");
}
return results;
}

// Put previous functions all together
async function lintFiles(filePaths) {

// The ESLint configuration. Alternatively, you could load the configuration
// from a .eslintrc file or just use the default config.
// from an eslint.config.js file or just use the default config.
const overrideConfig = {
env: {
es6: true,
node: true,
},
parserOptions: {
languageOptions: {
ecmaVersion: 2018,
sourceType: "commonjs"
},
rules: {
"no-console": "error",
Expand All @@ -59,4 +60,4 @@ async function lintFiles(filePaths) {
}

// Export integration
module.exports = { lintFiles }
module.exports = { lintFiles }
162 changes: 99 additions & 63 deletions docs/src/integrate/integration-tutorial.md
View file
Expand Up @@ -7,25 +7,42 @@ eleventyNavigation:
order: 1
---

This guide walks you through integrating the `ESLint` class to lint files and retrieve results, which can be useful for creating integrations with other projects.
This guide walks you through integrating the `ESLint` class to lint files and
retrieve results, which can be useful for creating integrations with other
projects.

## Why Create an Integration?

You might want to create an ESLint integration if you're creating developer tooling, such as the following:
You might want to create an ESLint integration if you're creating developer
tooling, such as the following:

* **Code editors and IDEs**: Integrating ESLint with code editors and IDEs can provide real-time feedback on code quality and automatically highlight potential issues as you type. Many editors already have ESLint plugins available, but you may need to create a custom integration if the existing plugins do not meet your specific requirements.
* **Code editors and IDEs**: Integrating ESLint with code editors and IDEs can
provide real-time feedback on code quality and automatically highlight
potential issues as you type. Many editors already have ESLint plugins
available, but you may need to create a custom integration if the existing
plugins do not meet your specific requirements.

* **Custom linter tools**: If you're building a custom linter tool that combines multiple linters or adds specific functionality, you may want to integrate ESLint into your tool to provide JavaScript linting capabilities.
* **Custom linter tools**: If you're building a custom linter tool that combines
multiple linters or adds specific functionality, you may want to integrate
ESLint into your tool to provide JavaScript linting capabilities.

* **Code review tools**: Integrating ESLint with code review tools can help automate the process of identifying potential issues in the codebase.
* **Code review tools**: Integrating ESLint with code review tools can help
automate the process of identifying potential issues in the codebase.

* **Learning platforms**: If you are developing a learning platform or coding tutorial, integrating ESLint can provide real-time feedback to users as they learn JavaScript, helping them improve their coding skills and learn best practices.
* **Learning platforms**: If you are developing a learning platform or coding
tutorial, integrating ESLint can provide real-time feedback to users as they
learn JavaScript, helping them improve their coding skills and learn best
practices.

* **Developer tool integration**: If you're creating or extending a developer tool, such as a bundler or testing framework, you may want to integrate ESLint to provide linting capabilities. You can integrate ESLint directly into the tool or as a plugin.
* **Developer tool integration**: If you're creating or extending a developer
tool, such as a bundler or testing framework, you may want to integrate ESLint
to provide linting capabilities. You can integrate ESLint directly into the
tool or as a plugin.

## What You'll Build

In this guide, you'll create a simple Node.js project that uses the `ESLint` class to lint files and retrieve results.
In this guide, you'll create a simple Node.js project that uses the `ESLint`
class to lint files and retrieve results.

## Requirements

Expand Down Expand Up @@ -68,24 +85,34 @@ touch example-eslint-integration.js

Import the `ESLint` class from the `eslint` package and create a new instance.

You can customize the ESLint configuration by passing an options object to the `ESLint` constructor:
You can customize the ESLint configuration by passing an options object to the
`ESLint` constructor:

```javascript
// example-eslint-integration.js

const { ESLint } = require("eslint");

// Create an instance of ESLint with the configuration passed to the function
function createESLintInstance(overrideConfig){
return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig, fix: true });
function createESLintInstance(overrideConfig) {
return new ESLint({
overrideConfigFile: true,
overrideConfig,
fix: true,
});
}
```

## Step 3: Lint and Fix Files

To lint a file, use the `lintFiles` method of the `ESLint` instance. The `filePaths` argument passed to `ESLint#lintFiles()` can be a string or an array of strings, representing the file path(s) you want to lint. The file paths can be globs or filenames.
To lint a file, use the `lintFiles` method of the `ESLint` instance. The
`filePaths` argument passed to `ESLint#lintFiles()` can be a string or an array
of strings, representing the file path(s) you want to lint. The file paths can
be globs or filenames.

The static method `ESLint.outputFixes()` takes the linting results from the call to `ESLint#lintFiles()`, and then writes the fixed code back to the source files.
The static method `ESLint.outputFixes()` takes the linting results from the call
to `ESLint#lintFiles()`, and then writes the fixed code back to the source
files.

```javascript
// example-eslint-integration.js
Expand All @@ -105,7 +132,9 @@ async function lintAndFix(eslint, filePaths) {

## Step 4: Output Results

Define a function to output the linting results to the console. This should be specific to your integration's needs. For example, you could report the linting results to a user interface.
Define a function to output the linting results to the console. This should be
specific to your integration's needs. For example, you could report the linting
results to a user interface.

In this example, we'll simply log the results to the console:

Expand All @@ -118,7 +147,10 @@ In this example, we'll simply log the results to the console:
// Log results to console if there are any problems
function outputLintingResults(results) {
// Identify the number of problems found
const problems = results.reduce((acc, result) => acc + result.errorCount + result.warningCount, 0);
const problems = results.reduce(
(acc, result) => acc + result.errorCount + result.warningCount,
0,
);

if (problems > 0) {
console.log("Linting errors found!");
Expand All @@ -132,37 +164,34 @@ function outputLintingResults(results) {

## Step 5: Put It All Together

Put the above functions together in a new function called `lintFiles`. This function will be the main entry point for your integration:
Put the above functions together in a new function called `lintFiles`. This
function will be the main entry point for your integration:

```javascript
// example-eslint-integration.js

// Put previous functions all together
async function lintFiles(filePaths) {

// The ESLint configuration. Alternatively, you could load the configuration
// from a .eslintrc file or just use the default config.
const overrideConfig = {
env: {
es6: true,
node: true,
},
parserOptions: {
ecmaVersion: 2018,
},
rules: {
"no-console": "error",
"no-unused-vars": "warn",
},
};

const eslint = createESLintInstance(overrideConfig);
const results = await lintAndFix(eslint, filePaths);
return outputLintingResults(results);
// The ESLint configuration. Alternatively, you could load the configuration
// from a .eslintrc file or just use the default config.
const overrideConfig = {
languageOptions: {
ecmaVersion: 2018,
sourceType: "commonjs",
},
rules: {
"no-console": "error",
"no-unused-vars": "warn",
},
};

const eslint = createESLintInstance(overrideConfig);
const results = await lintAndFix(eslint, filePaths);
return outputLintingResults(results);
}

// Export integration
module.exports = { lintFiles }
module.exports = { lintFiles };
```

Here's the complete code example for `example-eslint-integration.js`:
Expand All @@ -171,8 +200,12 @@ Here's the complete code example for `example-eslint-integration.js`:
const { ESLint } = require("eslint");

// Create an instance of ESLint with the configuration passed to the function
function createESLintInstance(overrideConfig){
return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig, fix: true });
function createESLintInstance(overrideConfig) {
return new ESLint({
overrideConfigFile: true,
overrideConfig,
fix: true,
});
}

// Lint the specified files and return the results
Expand All @@ -188,7 +221,10 @@ async function lintAndFix(eslint, filePaths) {
// Log results to console if there are any problems
function outputLintingResults(results) {
// Identify the number of problems found
const problems = results.reduce((acc, result) => acc + result.errorCount + result.warningCount, 0);
const problems = results.reduce(
(acc, result) => acc + result.errorCount + result.warningCount,
0,
);

if (problems > 0) {
console.log("Linting errors found!");
Expand All @@ -201,36 +237,36 @@ function outputLintingResults(results) {

// Put previous functions all together
async function lintFiles(filePaths) {

// The ESLint configuration. Alternatively, you could load the configuration
// from a .eslintrc file or just use the default config.
const overrideConfig = {
env: {
es6: true,
node: true,
},
parserOptions: {
ecmaVersion: 2018,
},
rules: {
"no-console": "error",
"no-unused-vars": "warn",
},
};

const eslint = createESLintInstance(overrideConfig);
const results = await lintAndFix(eslint, filePaths);
return outputLintingResults(results);
// The ESLint configuration. Alternatively, you could load the configuration
// from an eslint.config.js file or just use the default config.
const overrideConfig = {
languageOptions: {
ecmaVersion: 2018,
sourceType: "commonjs",
},
rules: {
"no-console": "error",
"no-unused-vars": "warn",
},
};

const eslint = createESLintInstance(overrideConfig);
const results = await lintAndFix(eslint, filePaths);
return outputLintingResults(results);
}

// Export integration
module.exports = { lintFiles }
module.exports = { lintFiles };
```

## Conclusion

In this tutorial, we have covered the essentials of using the `ESLint` class to lint files and retrieve results in your projects. This knowledge can be applied to create custom integrations, such as code editor plugins, to provide real-time feedback on code quality.
In this tutorial, we have covered the essentials of using the `ESLint` class to
lint files and retrieve results in your projects. This knowledge can be applied
to create custom integrations, such as code editor plugins, to provide real-time
feedback on code quality.

## View the Tutorial Code

You can view the annotated source code for the tutorial [here](https://github.com/eslint/eslint/tree/main/docs/_examples/integration-tutorial-code).
You can view the annotated source code for the tutorial
[here](https://github.com/eslint/eslint/tree/main/docs/_examples/integration-tutorial-code).

0 comments on commit cadfbcd

Please sign in to comment.