Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat!: Rename FlatESLint to ESLint #17914

Merged
merged 3 commits into from Dec 29, 2023
Merged

feat!: Rename FlatESLint to ESLint #17914

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c739ce2
feat!: Rename FlatESLint to ESLint
nzakas Dec 28, 2023
df79710
Rename supporting types
nzakas Dec 28, 2023
8f12cae
Update docs/src/use/migrate-to-9.0.0.md
mdjermanovic Dec 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
49 changes: 25 additions & 24 deletions docs/_examples/integration-tutorial-code/example-eslint-integration.js
View file
Open in desktop
@@ -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
Open in desktop
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).