From 4b38679136158db058dda8dea0d8c47ba9f85536 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Thu, 27 Apr 2023 20:25:54 -0300 Subject: [PATCH 01/19] docs: Integration section and tutorial --- docs/src/integrate/index.md | 1 + docs/src/integrate/lint-with-nodejs-api.md | 219 +++++++++++++++++++++ 2 files changed, 220 insertions(+) create mode 100644 docs/src/integrate/index.md create mode 100644 docs/src/integrate/lint-with-nodejs-api.md diff --git a/docs/src/integrate/index.md b/docs/src/integrate/index.md new file mode 100644 index 00000000000..9d2972461fe --- /dev/null +++ b/docs/src/integrate/index.md @@ -0,0 +1 @@ +TODO: add this as remove nodejs api from the extend index \ No newline at end of file diff --git a/docs/src/integrate/lint-with-nodejs-api.md b/docs/src/integrate/lint-with-nodejs-api.md new file mode 100644 index 00000000000..f6d290752f4 --- /dev/null +++ b/docs/src/integrate/lint-with-nodejs-api.md @@ -0,0 +1,219 @@ +--- +title: Create Integration with the Node.js API Tutorial +eleventyNavigation: + key: create integration with nodejs api tutorial + parent: extend eslint + title: Create Integration with the Node.js API Tutorial + order: 6 +--- + +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 a Custom Integration? + +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. + +- **Continuous Integration (CI) pipelines**: Including ESLint in CI pipelines can help enforce code quality standards before merging changes into the main codebase. By integrating ESLint into your CI process, you can automatically run linting checks on pull requests and provide feedback to developers about potential issues. + +- **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. + +- **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. + +## 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. + +## Requirements + +This tutorial assumes you are familiar with JavaScript and Node.js. + +To follow this tutorial, you'll need to have the following: + +- Node.js (v12.0.0 or higher) +- npm or Yarn package manager +- A text editor + +TODO: put the example integration in a little project, `_integration-tutorial-code` + +## Step 1: Setup + +First, create a new project directory: + +```sh +mkdir eslint-integration +cd eslint-integration +``` + +Initialize the project with a `package.json` file: + +```sh +npm init -y +``` + +Install the `eslint` package as a dependency: + +```sh +npm install eslint +``` + +Create a new file called `example-eslint-integration.js` in the project root: + +```sh +touch example-eslint-integration.js +``` + +## Step 2: Import and Configure the `ESLint` Instance + +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: + +```javascript +// example-eslint-integration.js + +const { ESLint } = require("eslint"); + +function createESLintInstance(eslintConfig){ + if (eslintConfig) { + return new ESLint({ overrideConfig: eslintConfig }); + } else { + return new ESLint(); + } +} +``` + +## Step 3: Get Linting Results + +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. + +To format the linting results for better readability, use the `outputFixes` and `getErrorResults` methods: + +TODO: work on the await outputFixes. also i think eslint is all sync, +so deal with that. + +```javascript +// example-eslint-integration.js + +// ... previous step's code to instantiate the ESLint instance + +// Define a function that lints the specified files and returns the error results +async function getLintingResults(eslint, filePaths) { + const results = await eslint.getLintResults(filePaths); + + // Apply automatic fixes and output fixed code + await ESLint.outputFixes(results); + + // Get error results + const errorResults = ESLint.getErrorResults(results); + + return errorResults; +} +``` + +## Step 4: Handle Results + +Define a custom function to handle the linting results. This should be custom 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: + +```javascript +// example-eslint-integration.js + +// ... previous step's code to instantiate the ESLint instance +// and get linting results. + +// Log results to console if there are any problems +function handleLintingResults(results) { + if (results.length) { + console.log("Linting errors found!"); + console.log(results); + } else { + console.log("No linting errors found."); + } +} +``` + +## Step 5: Put It All Together + +Here's the complete code example for `example-eslint-integration.js`: + +```javascript +// example-eslint-integration.js +// combine code examples from the previous few steps: +const { ESLint } = require("eslint"); + +function createESLintInstance(eslintConfig){ + if (eslintConfig) { + return new ESLint({ overrideConfig: eslintConfig }); + } else { + return new ESLint(); + } +} + +// Define a function that lints the specified files and returns the error results +async function getLintingResults(eslint, filePaths) { + const results = await eslint.getLintResults(filePaths); + + // Apply automatic fixes and output fixed code + await ESLint.outputFixes(results); + + // Get error results + const errorResults = ESLint.getErrorResults(results); + + return errorResults; +} + +// Log results to console if there are any problems +function handleLintingResults(results) { + if (results.length) { + console.log("Linting errors found!"); + console.log(results); + } else { + console.log("No linting errors found."); + } +} + +// Put previous function all together + + + +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(eslintConfig); + const results = getLintingResults(eslint, filePaths); + handleLintingResults(results); +} + +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. + +## View the Tutorial Code + +TODO: make sure link correct before publishing + +You can view the annotated source code for the tutorial [here](https://github.com/eslint/eslint/tree/main/docs/_integration-tutorial-code). \ No newline at end of file From bee32d51ce2f29025e8adfbf90feef948914c2ff Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Sun, 30 Apr 2023 20:20:34 -0400 Subject: [PATCH 02/19] add navigation and landing pages for integration section --- docs/src/contribute/index.md | 2 +- docs/src/extend/index.md | 4 --- docs/src/integrate/index.md | 26 ++++++++++++++++++- ...-nodejs-api.md => integration-tutorial.md} | 4 +-- docs/src/integrate/nodejs-api.md | 4 +-- docs/src/maintain/index.md | 2 +- docs/src/pages/index.md | 6 ++++- 7 files changed, 36 insertions(+), 12 deletions(-) rename docs/src/integrate/{lint-with-nodejs-api.md => integration-tutorial.md} (99%) diff --git a/docs/src/contribute/index.md b/docs/src/contribute/index.md index 3a20390db3d..3b0a6d8f5c5 100644 --- a/docs/src/contribute/index.md +++ b/docs/src/contribute/index.md @@ -3,7 +3,7 @@ title: Contribute to ESLint eleventyNavigation: key: contribute to eslint title: Contribute to ESLint - order: 3 + order: 4 --- One of the great things about open source projects is that anyone can contribute in any number of meaningful ways. ESLint couldn't exist without the help of the many contributors it's had since the project began, and we want you to feel like you can contribute and make a difference as well. diff --git a/docs/src/extend/index.md b/docs/src/extend/index.md index 9f623a6119d..18c87047674 100644 --- a/docs/src/extend/index.md +++ b/docs/src/extend/index.md @@ -44,7 +44,3 @@ This section explains how you can use a custom processor to have ESLint process ## [Share Configurations](shareable-configs) This section explains how you can bundle and share ESLint configuration in a JavaScript package. - -## [Node.js API Reference](../integrate/nodejs-api) - -If you're interested in writing a tool that uses ESLint, then you can use the Node.js API to get programmatic access to functionality. diff --git a/docs/src/integrate/index.md b/docs/src/integrate/index.md index 9d2972461fe..306a2d6ddfb 100644 --- a/docs/src/integrate/index.md +++ b/docs/src/integrate/index.md @@ -1 +1,25 @@ -TODO: add this as remove nodejs api from the extend index \ No newline at end of file +--- +title: Integrate ESLint +eleventyNavigation: + key: integrate eslint + title: integrate ESLint + order: 3 + +--- + +This guide is intended for those who wish to integrate the functionality of ESLint. + +In order to integrate ESLint, it's recommended that: + +* You know JavaScript, since ESLint is written in JavaScript. +* You have some familiarity with Node.js, since ESLint runs on it. + +If that sounds like you, then continue reading to get started. + +## [Create Integration with the Node.js API Tutorial](integration-tutorial) + +This tutorial walks you through the process of creating a basic integration with ESLint using the Node.js API. + +## [Node.js API Reference](nodejs-api) + +If you're interested in writing a tool that uses ESLint, then you can use the Node.js API to get programmatic access to functionality. diff --git a/docs/src/integrate/lint-with-nodejs-api.md b/docs/src/integrate/integration-tutorial.md similarity index 99% rename from docs/src/integrate/lint-with-nodejs-api.md rename to docs/src/integrate/integration-tutorial.md index f6d290752f4..daa199849cd 100644 --- a/docs/src/integrate/lint-with-nodejs-api.md +++ b/docs/src/integrate/integration-tutorial.md @@ -2,9 +2,9 @@ title: Create Integration with the Node.js API Tutorial eleventyNavigation: key: create integration with nodejs api tutorial - parent: extend eslint + parent: integrate eslint title: Create Integration with the Node.js API Tutorial - order: 6 + 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. diff --git a/docs/src/integrate/nodejs-api.md b/docs/src/integrate/nodejs-api.md index de035ca731c..8fd57957850 100644 --- a/docs/src/integrate/nodejs-api.md +++ b/docs/src/integrate/nodejs-api.md @@ -2,9 +2,9 @@ title: Node.js API Reference eleventyNavigation: key: node.js api - parent: extend eslint + parent: integrate eslint title: Node.js API Reference - order: 6 + order: 2 --- While ESLint is designed to be run on the command line, it's possible to use ESLint programmatically through the Node.js API. The purpose of the Node.js API is to allow plugin and tool authors to use the ESLint functionality directly, without going through the command line interface. diff --git a/docs/src/maintain/index.md b/docs/src/maintain/index.md index 29c3ab89f30..1b083836f3f 100644 --- a/docs/src/maintain/index.md +++ b/docs/src/maintain/index.md @@ -3,7 +3,7 @@ title: Maintain ESLint eleventyNavigation: key: maintain eslint title: Maintain ESLint - order: 4 + order: 5 --- diff --git a/docs/src/pages/index.md b/docs/src/pages/index.md index c8f5f62dcaa..f1a112a0010 100644 --- a/docs/src/pages/index.md +++ b/docs/src/pages/index.md @@ -12,7 +12,11 @@ as well as guides for migrating from earlier versions of ESLint. ## [Extend ESLint](extend/) -Intended for people who wish to extend ESLint. Contains information about creating custom rules, configurations, plugins, and formatters; and information about our Node.js API. +Intended for people who wish to extend ESLint. Contains information about creating custom rules, configurations, plugins, and formatters. + +## [Integrate ESLint](integrate/) + +Intended for people who wish to create integrations with ESLint. Contains information about creating integrations and using the Node.js API. ## [Contribute to ESLint](contribute/) From 15eb25bc7f325073890f5ccbb1c13f341d99ba36 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Tue, 2 May 2023 21:34:05 -0400 Subject: [PATCH 03/19] copy edits --- docs/src/integrate/integration-tutorial.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index daa199849cd..b53b29e4e94 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -1,9 +1,9 @@ --- -title: Create Integration with the Node.js API Tutorial +title: Integrate with the Node.js API Tutorial eleventyNavigation: - key: create integration with nodejs api tutorial + key: integrate with the node.js api tutorial parent: integrate eslint - title: Create Integration with the Node.js API Tutorial + title: Integrate with the Node.js API Tutorial order: 1 --- @@ -144,7 +144,7 @@ Here's the complete code example for `example-eslint-integration.js`: ```javascript // example-eslint-integration.js -// combine code examples from the previous few steps: +// Combine code examples from the previous few steps: const { ESLint } = require("eslint"); function createESLintInstance(eslintConfig){ @@ -194,6 +194,9 @@ function lintFiles(filePaths) { parserOptions: { ecmaVersion: 2018, }, + extends: [ + "eslint:recommended", + ], rules: { "no-console": "error", "no-unused-vars": "warn", From f3c38f2541b41b17c045465dd7b026a668fd09e1 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Tue, 2 May 2023 22:13:47 -0400 Subject: [PATCH 04/19] working sample rule --- docs/_integration-tutorial-code/.eslintrc.js | 15 +++++ docs/_integration-tutorial-code/.gitignore | 2 + .../example-eslint-integration.js | 67 +++++++++++++++++++ .../example-eslint-integration.test.js | 27 ++++++++ docs/_integration-tutorial-code/package.json | 17 +++++ .../sample-data/test-file.js | 32 +++++++++ 6 files changed, 160 insertions(+) create mode 100644 docs/_integration-tutorial-code/.eslintrc.js create mode 100644 docs/_integration-tutorial-code/.gitignore create mode 100644 docs/_integration-tutorial-code/example-eslint-integration.js create mode 100644 docs/_integration-tutorial-code/example-eslint-integration.test.js create mode 100644 docs/_integration-tutorial-code/package.json create mode 100644 docs/_integration-tutorial-code/sample-data/test-file.js diff --git a/docs/_integration-tutorial-code/.eslintrc.js b/docs/_integration-tutorial-code/.eslintrc.js new file mode 100644 index 00000000000..9f0887c6b3b --- /dev/null +++ b/docs/_integration-tutorial-code/.eslintrc.js @@ -0,0 +1,15 @@ +module.exports = { + "env": { + "browser": true, + "commonjs": true, + "es2021": true + }, + "extends": "airbnb-base", + "overrides": [ + ], + "parserOptions": { + "ecmaVersion": "latest" + }, + "rules": { + } +} diff --git a/docs/_integration-tutorial-code/.gitignore b/docs/_integration-tutorial-code/.gitignore new file mode 100644 index 00000000000..28f1ba7565f --- /dev/null +++ b/docs/_integration-tutorial-code/.gitignore @@ -0,0 +1,2 @@ +node_modules +.DS_Store \ No newline at end of file diff --git a/docs/_integration-tutorial-code/example-eslint-integration.js b/docs/_integration-tutorial-code/example-eslint-integration.js new file mode 100644 index 00000000000..03889e4be02 --- /dev/null +++ b/docs/_integration-tutorial-code/example-eslint-integration.js @@ -0,0 +1,67 @@ +/** + * @fileoverview An example of how to integrate ESLint into your own tool + * @author Ben Perlmutter + */ + +const { ESLint } = require("eslint"); + +function createESLintInstance(eslintConfig){ + if (eslintConfig) { + return new ESLint({ useEslintrc: false, overrideConfig: eslintConfig }); + } else { + return new ESLint({ useEslintrc: false }); + } +} + +// Define a function that lints the specified files and returns the error results +async function getLintingResults(eslint, filePaths) { + const results = await eslint.lintFiles(filePaths); + + // Apply automatic fixes and output fixed code + await ESLint.outputFixes(results); + + // Get error results + const errorResults = ESLint.getErrorResults(results); + + return errorResults; +} + +// Log results to console if there are any problems +function handleLintingResults(results) { + if (results.length) { + console.log("Linting errors found!"); + console.log(results); + } else { + console.log("No linting errors found."); + } + return results; +} + +// Put previous function 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 getLintingResults(eslint, filePaths); + return handleLintingResults(results); +} + +module.exports = { lintFiles } \ No newline at end of file diff --git a/docs/_integration-tutorial-code/example-eslint-integration.test.js b/docs/_integration-tutorial-code/example-eslint-integration.test.js new file mode 100644 index 00000000000..2e3e2808d57 --- /dev/null +++ b/docs/_integration-tutorial-code/example-eslint-integration.test.js @@ -0,0 +1,27 @@ +/** + * @fileoverview Test ESLint integration example code + * @author Ben Perlmutter + */ + +const { lintFiles } = require("./example-eslint-integration"); + +async function testExampleEslintIntegration(){ + const filePaths = ["sample-data/test-file.js"]; + const lintResults = await lintFiles(filePaths); + + // Test cases + if(lintResults[0].messages.length !== 3){ + throw new Error("Expected 3 linting errors, got " + lintResults.length); + } + const messageRuleIds = new Set() + lintResults[0].messages.forEach(msg => messageRuleIds.add(msg.ruleId)); + if(messageRuleIds.size !== 1){ + throw new Error("Expected 1 linting rule, got " + messageRuleIds.size); + } + if(!messageRuleIds.has("no-console")){ + throw new Error("Expected linting rule 'no-console', got " + messageRuleIds); + } + +} + +testExampleEslintIntegration() \ No newline at end of file diff --git a/docs/_integration-tutorial-code/package.json b/docs/_integration-tutorial-code/package.json new file mode 100644 index 00000000000..6cd037d1de4 --- /dev/null +++ b/docs/_integration-tutorial-code/package.json @@ -0,0 +1,17 @@ +{ + "name": "_integration-tutorial-code", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "node example-eslint-integration.test.js" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "eslint": "^8.39.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-plugin-import": "^2.27.5" + } +} diff --git a/docs/_integration-tutorial-code/sample-data/test-file.js b/docs/_integration-tutorial-code/sample-data/test-file.js new file mode 100644 index 00000000000..7070d6b233e --- /dev/null +++ b/docs/_integration-tutorial-code/sample-data/test-file.js @@ -0,0 +1,32 @@ +/** + * @fileoverview Example data to lint using ESLint. This file contains a variety of errors. + * @author Ben Perlmutter + */ +v// 'var' should be replaced with 'const' or 'let' (no-var from eslint:recommended) +var x = 10; + +// Unused variable 'y' (no-unused-vars from custom rules) +const y = 20; + +function add(a, b) { + // Unexpected console statement (no-console from custom rules) + console.log('Adding two numbers'); + return a + b; +} + +// 'result' is assigned a value but never used (no-unused-vars from custom rules) +const result = add(x, 5); + +// Expected indentation of 2 spaces but found 4 (indent from eslint:recommended) + if (x > 5) { + // Unexpected console statement (no-console from custom rules) + console.log('x is greater than 5'); + } else { + // Unexpected console statement (no-console from custom rules) + console.log('x is not greater than 5'); + } + +// 'subtract' is defined but never used (no-unused-vars from custom rules) +function subtract(a, b) { + return a - b; +} From 6c755b7302924d3995531055b5b22362eba15f35 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Tue, 2 May 2023 22:30:44 -0400 Subject: [PATCH 05/19] complete integration tutorial draft --- .../example-eslint-integration.js | 3 - docs/src/integrate/integration-tutorial.md | 87 +++++++++++++------ 2 files changed, 60 insertions(+), 30 deletions(-) diff --git a/docs/_integration-tutorial-code/example-eslint-integration.js b/docs/_integration-tutorial-code/example-eslint-integration.js index 03889e4be02..8751232e69a 100644 --- a/docs/_integration-tutorial-code/example-eslint-integration.js +++ b/docs/_integration-tutorial-code/example-eslint-integration.js @@ -38,9 +38,6 @@ function handleLintingResults(results) { } // Put previous function all together - - - async function lintFiles(filePaths) { // The ESLint configuration. Alternatively, you could load the configuration diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index b53b29e4e94..fe2687b6151 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -37,32 +37,30 @@ To follow this tutorial, you'll need to have the following: - npm or Yarn package manager - A text editor -TODO: put the example integration in a little project, `_integration-tutorial-code` - ## Step 1: Setup First, create a new project directory: -```sh +```shell mkdir eslint-integration cd eslint-integration ``` Initialize the project with a `package.json` file: -```sh +```shell npm init -y ``` Install the `eslint` package as a dependency: -```sh +```shell npm install eslint ``` Create a new file called `example-eslint-integration.js` in the project root: -```sh +```shell touch example-eslint-integration.js ``` @@ -79,9 +77,9 @@ const { ESLint } = require("eslint"); function createESLintInstance(eslintConfig){ if (eslintConfig) { - return new ESLint({ overrideConfig: eslintConfig }); + return new ESLint({ useEslintrc: false, overrideConfig: eslintConfig }); } else { - return new ESLint(); + return new ESLint({ useEslintrc: false }); } } ``` @@ -102,9 +100,9 @@ so deal with that. // ... previous step's code to instantiate the ESLint instance -// Define a function that lints the specified files and returns the error results +/// Define a function that lints the specified files and returns the error results async function getLintingResults(eslint, filePaths) { - const results = await eslint.getLintResults(filePaths); + const results = await eslint.lintFiles(filePaths); // Apply automatic fixes and output fixed code await ESLint.outputFixes(results); @@ -135,29 +133,71 @@ function handleLintingResults(results) { } else { console.log("No linting errors found."); } + return results; } + + ``` ## Step 5: Put It All Together -Here's the complete code example for `example-eslint-integration.js`: +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 -// Combine code examples from the previous few steps: + +// Put previous function all together +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, + }, + extends: [ + "eslint:recommended", + ], + rules: { + "no-console": "error", + "no-unused-vars": "warn", + }, + }; + + const eslint = createESLintInstance(eslintConfig); + const results = getLintingResults(eslint, filePaths); + handleLintingResults(results); +} + +// Export integration +module.exports = { lintFiles } +``` + +Here's the complete code example for `example-eslint-integration.js`: + +```javascript +/** + * @fileoverview An example of how to integrate ESLint into your own tool + * @author Ben Perlmutter + */ + const { ESLint } = require("eslint"); function createESLintInstance(eslintConfig){ if (eslintConfig) { - return new ESLint({ overrideConfig: eslintConfig }); + return new ESLint({ useEslintrc: false, overrideConfig: eslintConfig }); } else { - return new ESLint(); + return new ESLint({ useEslintrc: false }); } } // Define a function that lints the specified files and returns the error results async function getLintingResults(eslint, filePaths) { - const results = await eslint.getLintResults(filePaths); + const results = await eslint.lintFiles(filePaths); // Apply automatic fixes and output fixed code await ESLint.outputFixes(results); @@ -176,13 +216,11 @@ function handleLintingResults(results) { } else { console.log("No linting errors found."); } + return results; } // Put previous function all together - - - -function lintFiles(filePaths) { +async function lintFiles(filePaths) { // The ESLint configuration. Alternatively, you could load the configuration // from a .eslintrc file or just use the default config. @@ -194,18 +232,15 @@ function lintFiles(filePaths) { parserOptions: { ecmaVersion: 2018, }, - extends: [ - "eslint:recommended", - ], rules: { "no-console": "error", "no-unused-vars": "warn", }, }; - const eslint = createESLintInstance(eslintConfig); - const results = getLintingResults(eslint, filePaths); - handleLintingResults(results); + const eslint = createESLintInstance(overrideConfig); + const results = await getLintingResults(eslint, filePaths); + return handleLintingResults(results); } module.exports = { lintFiles } @@ -217,6 +252,4 @@ In this tutorial, we have covered the essentials of using the `ESLint` class to ## View the Tutorial Code -TODO: make sure link correct before publishing - You can view the annotated source code for the tutorial [here](https://github.com/eslint/eslint/tree/main/docs/_integration-tutorial-code). \ No newline at end of file From dc96c19d0a1660b3904dac17f3982ca0f8e3fcd1 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Tue, 2 May 2023 22:31:25 -0400 Subject: [PATCH 06/19] remove TODO --- docs/src/integrate/integration-tutorial.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index fe2687b6151..6c7c9f478f1 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -92,9 +92,6 @@ The `filePaths` argument passed to `ESLint#lintFiles()` can be a string or an ar To format the linting results for better readability, use the `outputFixes` and `getErrorResults` methods: -TODO: work on the await outputFixes. also i think eslint is all sync, -so deal with that. - ```javascript // example-eslint-integration.js From 9123a306eb8d9fea1745da148852560b02f6f277 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter <57849986+bpmutter@users.noreply.github.com> Date: Mon, 15 May 2023 21:56:49 -0300 Subject: [PATCH 07/19] Apply suggestions from code review Co-authored-by: Nicholas C. Zakas --- .../example-eslint-integration.js | 6 +++--- docs/src/integrate/index.md | 2 +- docs/src/integrate/integration-tutorial.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/_integration-tutorial-code/example-eslint-integration.js b/docs/_integration-tutorial-code/example-eslint-integration.js index 8751232e69a..cf744da6066 100644 --- a/docs/_integration-tutorial-code/example-eslint-integration.js +++ b/docs/_integration-tutorial-code/example-eslint-integration.js @@ -13,7 +13,7 @@ function createESLintInstance(eslintConfig){ } } -// Define a function that lints the specified files and returns the error results +// a function that lints the specified files and returns the error results async function getLintingResults(eslint, filePaths) { const results = await eslint.lintFiles(filePaths); @@ -27,7 +27,7 @@ async function getLintingResults(eslint, filePaths) { } // Log results to console if there are any problems -function handleLintingResults(results) { +function outputLintingResults(results) { if (results.length) { console.log("Linting errors found!"); console.log(results); @@ -37,7 +37,7 @@ function handleLintingResults(results) { return results; } -// Put previous function all together +// Put previous functions all together async function lintFiles(filePaths) { // The ESLint configuration. Alternatively, you could load the configuration diff --git a/docs/src/integrate/index.md b/docs/src/integrate/index.md index 306a2d6ddfb..7c25c780680 100644 --- a/docs/src/integrate/index.md +++ b/docs/src/integrate/index.md @@ -7,7 +7,7 @@ eleventyNavigation: --- -This guide is intended for those who wish to integrate the functionality of ESLint. +This guide is intended for those who wish to integrate the functionality of ESLint into other applications by using the ESLint API. In order to integrate ESLint, it's recommended that: diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index 6c7c9f478f1..f717dc0d5ac 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -9,7 +9,7 @@ eleventyNavigation: 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 a Custom Integration? +## Why Create an Integration? You might want to create an ESLint integration if you're creating developer tooling, such as the following: @@ -113,7 +113,7 @@ async function getLintingResults(eslint, filePaths) { ## Step 4: Handle Results -Define a custom function to handle the linting results. This should be custom to your integration's needs. +Define a function to output the linting results to the consoles. 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: ```javascript From 93df76cd723984db76389b255dbeaa4b1dc8656e Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Mon, 15 May 2023 21:31:09 -0400 Subject: [PATCH 08/19] update source code --- .../example-eslint-integration.js | 22 +++++++------------ .../example-eslint-integration.test.js | 8 +++---- 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/docs/_integration-tutorial-code/example-eslint-integration.js b/docs/_integration-tutorial-code/example-eslint-integration.js index cf744da6066..e9aca99c094 100644 --- a/docs/_integration-tutorial-code/example-eslint-integration.js +++ b/docs/_integration-tutorial-code/example-eslint-integration.js @@ -5,25 +5,19 @@ const { ESLint } = require("eslint"); -function createESLintInstance(eslintConfig){ - if (eslintConfig) { - return new ESLint({ useEslintrc: false, overrideConfig: eslintConfig }); - } else { - return new ESLint({ useEslintrc: false }); - } +// Create an instance of ESLint with the configuration passed to the function +function createESLintInstance(overrideConfig){ + return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig }); } -// a function that lints the specified files and returns the error results -async function getLintingResults(eslint, filePaths) { +// Lint the specified files and return the error results +async function lintAndFix(eslint, filePaths) { const results = await eslint.lintFiles(filePaths); // Apply automatic fixes and output fixed code await ESLint.outputFixes(results); - // Get error results - const errorResults = ESLint.getErrorResults(results); - - return errorResults; + return results; } // Log results to console if there are any problems @@ -57,8 +51,8 @@ async function lintFiles(filePaths) { }; const eslint = createESLintInstance(overrideConfig); - const results = await getLintingResults(eslint, filePaths); - return handleLintingResults(results); + const results = await lintAndFix(eslint, filePaths); + return outputLintingResults(results); } module.exports = { lintFiles } \ No newline at end of file diff --git a/docs/_integration-tutorial-code/example-eslint-integration.test.js b/docs/_integration-tutorial-code/example-eslint-integration.test.js index 2e3e2808d57..aa38b80125d 100644 --- a/docs/_integration-tutorial-code/example-eslint-integration.test.js +++ b/docs/_integration-tutorial-code/example-eslint-integration.test.js @@ -10,18 +10,18 @@ async function testExampleEslintIntegration(){ const lintResults = await lintFiles(filePaths); // Test cases - if(lintResults[0].messages.length !== 3){ - throw new Error("Expected 3 linting errors, got " + lintResults.length); + if(lintResults[0].messages.length !== 6){ + throw new Error("Expected 3 linting errors, got " + lintResults[0].messages.length); } const messageRuleIds = new Set() lintResults[0].messages.forEach(msg => messageRuleIds.add(msg.ruleId)); - if(messageRuleIds.size !== 1){ + if(messageRuleIds.size !== 2){ throw new Error("Expected 1 linting rule, got " + messageRuleIds.size); } if(!messageRuleIds.has("no-console")){ throw new Error("Expected linting rule 'no-console', got " + messageRuleIds); } - + console.log("All tests passed!"); } testExampleEslintIntegration() \ No newline at end of file From c54bc598096412df9c5ff9e7c10b987dcb9f03d2 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Mon, 15 May 2023 21:47:27 -0400 Subject: [PATCH 09/19] update tutorial --- .../example-eslint-integration.js | 1 + docs/src/integrate/integration-tutorial.md | 77 +++++++------------ 2 files changed, 28 insertions(+), 50 deletions(-) diff --git a/docs/_integration-tutorial-code/example-eslint-integration.js b/docs/_integration-tutorial-code/example-eslint-integration.js index e9aca99c094..d4f8272b777 100644 --- a/docs/_integration-tutorial-code/example-eslint-integration.js +++ b/docs/_integration-tutorial-code/example-eslint-integration.js @@ -55,4 +55,5 @@ async function lintFiles(filePaths) { return outputLintingResults(results); } +// Export integration module.exports = { lintFiles } \ No newline at end of file diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index f717dc0d5ac..a3b44e72369 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -15,14 +15,14 @@ You might want to create an ESLint integration if you're creating developer tool - **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. -- **Continuous Integration (CI) pipelines**: Including ESLint in CI pipelines can help enforce code quality standards before merging changes into the main codebase. By integrating ESLint into your CI process, you can automatically run linting checks on pull requests and provide feedback to developers about potential issues. - - **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. - **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 tools** If you're creating developer tools, like a testing framework or a bundler, you may want to integrate ESLint to provide linting capabilities. + ## 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. @@ -75,39 +75,31 @@ You can customize the ESLint configuration by passing an options object to the ` const { ESLint } = require("eslint"); -function createESLintInstance(eslintConfig){ - if (eslintConfig) { - return new ESLint({ useEslintrc: false, overrideConfig: eslintConfig }); - } else { - return new ESLint({ useEslintrc: false }); - } +// Create an instance of ESLint with the configuration passed to the function +function createESLintInstance(overrideConfig){ + return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig }); } ``` ## Step 3: Get Linting Results -To lint a file, use the `lintFiles` method of the `ESLint` instance: +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 `filePaths` argument passed to `ESLint#lintFiles()` can be a string or an array of strings, representing the file path(s) you want to lint. - -To format the linting results for better readability, use the `outputFixes` and `getErrorResults` methods: +The static method `ESLint.outputFixes()` takes the linting results from the call to `ESLint#lintFiles()`, and then writes any automatic fixes to the source files. ```javascript // example-eslint-integration.js // ... previous step's code to instantiate the ESLint instance -/// Define a function that lints the specified files and returns the error results -async function getLintingResults(eslint, filePaths) { +// Lint the specified files and return the error results +async function lintAndFix(eslint, filePaths) { const results = await eslint.lintFiles(filePaths); // Apply automatic fixes and output fixed code await ESLint.outputFixes(results); - // Get error results - const errorResults = ESLint.getErrorResults(results); - - return errorResults; + return results; } ``` @@ -123,7 +115,7 @@ For example, you could report the linting results to a user interface. In this e // and get linting results. // Log results to console if there are any problems -function handleLintingResults(results) { +function outputLintingResults(results) { if (results.length) { console.log("Linting errors found!"); console.log(results); @@ -132,8 +124,6 @@ function handleLintingResults(results) { } return results; } - - ``` ## Step 5: Put It All Together @@ -143,8 +133,8 @@ Put the above functions together in a new function called `lintFiles`. This func ```javascript // example-eslint-integration.js -// Put previous function all together -function lintFiles(filePaths) { +// 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. @@ -156,18 +146,15 @@ function lintFiles(filePaths) { parserOptions: { ecmaVersion: 2018, }, - extends: [ - "eslint:recommended", - ], rules: { "no-console": "error", "no-unused-vars": "warn", }, }; - const eslint = createESLintInstance(eslintConfig); - const results = getLintingResults(eslint, filePaths); - handleLintingResults(results); + const eslint = createESLintInstance(overrideConfig); + const results = await lintAndFix(eslint, filePaths); + return outputLintingResults(results); } // Export integration @@ -177,36 +164,25 @@ module.exports = { lintFiles } Here's the complete code example for `example-eslint-integration.js`: ```javascript -/** - * @fileoverview An example of how to integrate ESLint into your own tool - * @author Ben Perlmutter - */ - const { ESLint } = require("eslint"); -function createESLintInstance(eslintConfig){ - if (eslintConfig) { - return new ESLint({ useEslintrc: false, overrideConfig: eslintConfig }); - } else { - return new ESLint({ useEslintrc: false }); - } +// Create an instance of ESLint with the configuration passed to the function +function createESLintInstance(overrideConfig){ + return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig }); } -// Define a function that lints the specified files and returns the error results -async function getLintingResults(eslint, filePaths) { +// Lint the specified files and return the error results +async function lintAndFix(eslint, filePaths) { const results = await eslint.lintFiles(filePaths); // Apply automatic fixes and output fixed code await ESLint.outputFixes(results); - // Get error results - const errorResults = ESLint.getErrorResults(results); - - return errorResults; + return results; } // Log results to console if there are any problems -function handleLintingResults(results) { +function outputLintingResults(results) { if (results.length) { console.log("Linting errors found!"); console.log(results); @@ -216,7 +192,7 @@ function handleLintingResults(results) { return results; } -// Put previous function all together +// Put previous functions all together async function lintFiles(filePaths) { // The ESLint configuration. Alternatively, you could load the configuration @@ -236,10 +212,11 @@ async function lintFiles(filePaths) { }; const eslint = createESLintInstance(overrideConfig); - const results = await getLintingResults(eslint, filePaths); - return handleLintingResults(results); + const results = await lintAndFix(eslint, filePaths); + return outputLintingResults(results); } +// Export integration module.exports = { lintFiles } ``` From f5adc9ac103aae8c312ad4f9329054d24da0eb85 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Mon, 15 May 2023 21:50:23 -0400 Subject: [PATCH 10/19] copy / linting edits --- docs/src/integrate/integration-tutorial.md | 25 +++++++++++----------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index a3b44e72369..4567d0a215a 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -13,15 +13,15 @@ This guide walks you through integrating the `ESLint` class to lint files and re 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 tools** If you're creating developer tools, like a testing framework or a bundler, you may want to integrate ESLint to provide linting capabilities. +* **Developer tools** If you're creating developer tools, like a testing framework or a bundler, you may want to integrate ESLint to provide linting capabilities. ## What You'll Build @@ -33,9 +33,9 @@ This tutorial assumes you are familiar with JavaScript and Node.js. To follow this tutorial, you'll need to have the following: -- Node.js (v12.0.0 or higher) -- npm or Yarn package manager -- A text editor +* Node.js (v12.0.0 or higher) +* npm or Yarn package manager +* A text editor ## Step 1: Setup @@ -66,7 +66,7 @@ touch example-eslint-integration.js ## Step 2: Import and Configure the `ESLint` Instance -Import the `ESLint` class from the `eslint` package and create a new instance. +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: @@ -105,8 +105,9 @@ async function lintAndFix(eslint, filePaths) { ## Step 4: Handle Results -Define a function to output the linting results to the consoles. 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: +Define a function to output the linting results to the consoles. 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: ```javascript // example-eslint-integration.js @@ -226,4 +227,4 @@ In this tutorial, we have covered the essentials of using the `ESLint` class to ## View the Tutorial Code -You can view the annotated source code for the tutorial [here](https://github.com/eslint/eslint/tree/main/docs/_integration-tutorial-code). \ No newline at end of file +You can view the annotated source code for the tutorial [here](https://github.com/eslint/eslint/tree/main/docs/_integration-tutorial-code). From 752bc253aacd1fce4d720d8ab0dd55a8d0b5cbde Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Mon, 15 May 2023 21:54:27 -0400 Subject: [PATCH 11/19] lint fix --- docs/src/integrate/integration-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index 4567d0a215a..f1ddc862a89 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -125,7 +125,7 @@ function outputLintingResults(results) { } return results; } -``` +``` ## Step 5: Put It All Together From 315f14b09f484c7fcee6c1d38dbae963288f994f Mon Sep 17 00:00:00 2001 From: Ben Perlmutter <57849986+bpmutter@users.noreply.github.com> Date: Sun, 4 Jun 2023 20:17:49 -0300 Subject: [PATCH 12/19] Apply suggestions from code review Co-authored-by: Nicholas C. Zakas --- docs/src/integrate/integration-tutorial.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index f1ddc862a89..d531f687d79 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -34,7 +34,7 @@ This tutorial assumes you are familiar with JavaScript and Node.js. To follow this tutorial, you'll need to have the following: * Node.js (v12.0.0 or higher) -* npm or Yarn package manager +* npm * A text editor ## Step 1: Setup @@ -81,11 +81,11 @@ function createESLintInstance(overrideConfig){ } ``` -## Step 3: Get Linting Results +## 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. -The static method `ESLint.outputFixes()` takes the linting results from the call to `ESLint#lintFiles()`, and then writes any automatic fixes 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 @@ -103,7 +103,7 @@ async function lintAndFix(eslint, filePaths) { } ``` -## Step 4: Handle Results +## Step 4: Output Results Define a function to output the linting results to the consoles. This should be specific to your integration's needs. For example, you could report the linting results to a user interface. From 9ad7693652458289c4162b37ac7e961a6f587769 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Sun, 4 Jun 2023 19:28:16 -0400 Subject: [PATCH 13/19] implement nz feedback --- .../integration-tutorial-code}/.eslintrc.js | 0 .../integration-tutorial-code}/.gitignore | 0 .../example-eslint-integration.js | 0 .../example-eslint-integration.test.js | 0 .../integration-tutorial-code}/package.json | 0 .../integration-tutorial-code}/sample-data/test-file.js | 0 docs/src/integrate/integration-tutorial.md | 6 +++--- 7 files changed, 3 insertions(+), 3 deletions(-) rename docs/{_integration-tutorial-code => _examples/integration-tutorial-code}/.eslintrc.js (100%) rename docs/{_integration-tutorial-code => _examples/integration-tutorial-code}/.gitignore (100%) rename docs/{_integration-tutorial-code => _examples/integration-tutorial-code}/example-eslint-integration.js (100%) rename docs/{_integration-tutorial-code => _examples/integration-tutorial-code}/example-eslint-integration.test.js (100%) rename docs/{_integration-tutorial-code => _examples/integration-tutorial-code}/package.json (100%) rename docs/{_integration-tutorial-code => _examples/integration-tutorial-code}/sample-data/test-file.js (100%) diff --git a/docs/_integration-tutorial-code/.eslintrc.js b/docs/_examples/integration-tutorial-code/.eslintrc.js similarity index 100% rename from docs/_integration-tutorial-code/.eslintrc.js rename to docs/_examples/integration-tutorial-code/.eslintrc.js diff --git a/docs/_integration-tutorial-code/.gitignore b/docs/_examples/integration-tutorial-code/.gitignore similarity index 100% rename from docs/_integration-tutorial-code/.gitignore rename to docs/_examples/integration-tutorial-code/.gitignore diff --git a/docs/_integration-tutorial-code/example-eslint-integration.js b/docs/_examples/integration-tutorial-code/example-eslint-integration.js similarity index 100% rename from docs/_integration-tutorial-code/example-eslint-integration.js rename to docs/_examples/integration-tutorial-code/example-eslint-integration.js diff --git a/docs/_integration-tutorial-code/example-eslint-integration.test.js b/docs/_examples/integration-tutorial-code/example-eslint-integration.test.js similarity index 100% rename from docs/_integration-tutorial-code/example-eslint-integration.test.js rename to docs/_examples/integration-tutorial-code/example-eslint-integration.test.js diff --git a/docs/_integration-tutorial-code/package.json b/docs/_examples/integration-tutorial-code/package.json similarity index 100% rename from docs/_integration-tutorial-code/package.json rename to docs/_examples/integration-tutorial-code/package.json diff --git a/docs/_integration-tutorial-code/sample-data/test-file.js b/docs/_examples/integration-tutorial-code/sample-data/test-file.js similarity index 100% rename from docs/_integration-tutorial-code/sample-data/test-file.js rename to docs/_examples/integration-tutorial-code/sample-data/test-file.js diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index d531f687d79..fc3b7446870 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -21,7 +21,7 @@ You might want to create an ESLint integration if you're creating developer tool * **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 tools** If you're creating developer tools, like a testing framework or a bundler, you may want to integrate ESLint to provide linting capabilities. +* **Developer tool integration**: If you're creating a plugin for 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 @@ -52,7 +52,7 @@ Initialize the project with a `package.json` file: npm init -y ``` -Install the `eslint` package as a dependency: +Install the `eslint` package as a dependency (**not** a dev dependency): ```shell npm install eslint @@ -227,4 +227,4 @@ In this tutorial, we have covered the essentials of using the `ESLint` class to ## View the Tutorial Code -You can view the annotated source code for the tutorial [here](https://github.com/eslint/eslint/tree/main/docs/_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). From 1716a0a352059ee984e8a0203e6978aab7a68988 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Sun, 4 Jun 2023 19:42:13 -0400 Subject: [PATCH 14/19] Copy edit --- docs/src/integrate/integration-tutorial.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index fc3b7446870..7b6e0b59277 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -21,7 +21,7 @@ You might want to create an ESLint integration if you're creating developer tool * **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 a plugin for 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 @@ -52,7 +52,7 @@ Initialize the project with a `package.json` file: npm init -y ``` -Install the `eslint` package as a dependency (**not** a dev dependency): +Install the `eslint` package as a dependency (**not** as a dev dependency): ```shell npm install eslint From 2df027b2241ec101a57ecd7d130056be4aa93d5c Mon Sep 17 00:00:00 2001 From: Ben Perlmutter <57849986+bpmutter@users.noreply.github.com> Date: Sun, 11 Jun 2023 18:28:08 -0300 Subject: [PATCH 15/19] Apply suggestions from code review Co-authored-by: Nitin Kumar --- docs/src/integrate/index.md | 4 ++-- docs/src/integrate/integration-tutorial.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/integrate/index.md b/docs/src/integrate/index.md index 7c25c780680..dd3223e3ab3 100644 --- a/docs/src/integrate/index.md +++ b/docs/src/integrate/index.md @@ -11,8 +11,8 @@ This guide is intended for those who wish to integrate the functionality of ESLi In order to integrate ESLint, it's recommended that: -* You know JavaScript, since ESLint is written in JavaScript. -* You have some familiarity with Node.js, since ESLint runs on it. +* You know JavaScript since ESLint is written in JavaScript. +* You have some familiarity with Node.js since ESLint runs on it. If that sounds like you, then continue reading to get started. diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index 7b6e0b59277..f64cb095451 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -33,7 +33,7 @@ This tutorial assumes you are familiar with JavaScript and Node.js. To follow this tutorial, you'll need to have the following: -* Node.js (v12.0.0 or higher) +* Node.js (v12.22.0 or higher) * npm * A text editor From e9e5b2d7f35d3855fec6939a795bcbfbc7421722 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter <57849986+bpmutter@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:32:21 -0300 Subject: [PATCH 16/19] Apply suggestions from code review Co-authored-by: Milos Djermanovic --- .../example-eslint-integration.test.js | 4 ++-- docs/src/integrate/integration-tutorial.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_examples/integration-tutorial-code/example-eslint-integration.test.js b/docs/_examples/integration-tutorial-code/example-eslint-integration.test.js index aa38b80125d..5db9aead60a 100644 --- a/docs/_examples/integration-tutorial-code/example-eslint-integration.test.js +++ b/docs/_examples/integration-tutorial-code/example-eslint-integration.test.js @@ -11,12 +11,12 @@ async function testExampleEslintIntegration(){ // Test cases if(lintResults[0].messages.length !== 6){ - throw new Error("Expected 3 linting errors, got " + lintResults[0].messages.length); + throw new Error("Expected 6 linting problems, got " + lintResults[0].messages.length); } const messageRuleIds = new Set() lintResults[0].messages.forEach(msg => messageRuleIds.add(msg.ruleId)); if(messageRuleIds.size !== 2){ - throw new Error("Expected 1 linting rule, got " + messageRuleIds.size); + throw new Error("Expected 2 linting rule, got " + messageRuleIds.size); } if(!messageRuleIds.has("no-console")){ throw new Error("Expected linting rule 'no-console', got " + messageRuleIds); diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index f64cb095451..e584e807a62 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -172,7 +172,7 @@ function createESLintInstance(overrideConfig){ return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig }); } -// Lint the specified files and return the error results +// Lint the specified files and return the lint results async function lintAndFix(eslint, filePaths) { const results = await eslint.lintFiles(filePaths); From a39512a404234e554ac93500fc1956f1eee1f8b7 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter <57849986+bpmutter@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:40:59 -0300 Subject: [PATCH 17/19] Apply suggestions from code review Co-authored-by: Milos Djermanovic --- docs/src/integrate/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/integrate/index.md b/docs/src/integrate/index.md index dd3223e3ab3..19164a58530 100644 --- a/docs/src/integrate/index.md +++ b/docs/src/integrate/index.md @@ -16,7 +16,7 @@ In order to integrate ESLint, it's recommended that: If that sounds like you, then continue reading to get started. -## [Create Integration with the Node.js API Tutorial](integration-tutorial) +## [Integrate with the Node.js API Tutorial](integration-tutorial) This tutorial walks you through the process of creating a basic integration with ESLint using the Node.js API. From 735dca242204915a30bf8d07c974836be89b0372 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Mon, 19 Jun 2023 15:08:08 -0400 Subject: [PATCH 18/19] implement MD feedback --- .../integration-tutorial-code/.eslintrc.js | 15 ----------- .../example-eslint-integration.js | 7 ++++-- .../integration-tutorial-code/package.json | 6 ++--- .../sample-data/test-file.js | 25 ++++++++----------- docs/src/integrate/integration-tutorial.md | 20 +++++++++------ 5 files changed, 31 insertions(+), 42 deletions(-) delete mode 100644 docs/_examples/integration-tutorial-code/.eslintrc.js diff --git a/docs/_examples/integration-tutorial-code/.eslintrc.js b/docs/_examples/integration-tutorial-code/.eslintrc.js deleted file mode 100644 index 9f0887c6b3b..00000000000 --- a/docs/_examples/integration-tutorial-code/.eslintrc.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - "env": { - "browser": true, - "commonjs": true, - "es2021": true - }, - "extends": "airbnb-base", - "overrides": [ - ], - "parserOptions": { - "ecmaVersion": "latest" - }, - "rules": { - } -} diff --git a/docs/_examples/integration-tutorial-code/example-eslint-integration.js b/docs/_examples/integration-tutorial-code/example-eslint-integration.js index d4f8272b777..d04234ee55e 100644 --- a/docs/_examples/integration-tutorial-code/example-eslint-integration.js +++ b/docs/_examples/integration-tutorial-code/example-eslint-integration.js @@ -7,7 +7,7 @@ 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 }); + return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig, fix: true }); } // Lint the specified files and return the error results @@ -22,7 +22,10 @@ async function lintAndFix(eslint, filePaths) { // Log results to console if there are any problems function outputLintingResults(results) { - if (results.length) { + // ID 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 { diff --git a/docs/_examples/integration-tutorial-code/package.json b/docs/_examples/integration-tutorial-code/package.json index 6cd037d1de4..df00d7382f1 100644 --- a/docs/_examples/integration-tutorial-code/package.json +++ b/docs/_examples/integration-tutorial-code/package.json @@ -9,9 +9,7 @@ "keywords": [], "author": "", "license": "ISC", - "devDependencies": { - "eslint": "^8.39.0", - "eslint-config-airbnb-base": "^15.0.0", - "eslint-plugin-import": "^2.27.5" + "dependencies": { + "eslint": "^8.39.0" } } diff --git a/docs/_examples/integration-tutorial-code/sample-data/test-file.js b/docs/_examples/integration-tutorial-code/sample-data/test-file.js index 7070d6b233e..425375f8f8a 100644 --- a/docs/_examples/integration-tutorial-code/sample-data/test-file.js +++ b/docs/_examples/integration-tutorial-code/sample-data/test-file.js @@ -2,31 +2,28 @@ * @fileoverview Example data to lint using ESLint. This file contains a variety of errors. * @author Ben Perlmutter */ -v// 'var' should be replaced with 'const' or 'let' (no-var from eslint:recommended) -var x = 10; -// Unused variable 'y' (no-unused-vars from custom rules) +// Unused variable 'y' (no-unused-vars from configured rules) const y = 20; function add(a, b) { - // Unexpected console statement (no-console from custom rules) + // Unexpected console statement (no-console from configured rules) console.log('Adding two numbers'); return a + b; } -// 'result' is assigned a value but never used (no-unused-vars from custom rules) +// 'result' is assigned a value but never used (no-unused-vars from configured rules) const result = add(x, 5); -// Expected indentation of 2 spaces but found 4 (indent from eslint:recommended) - if (x > 5) { - // Unexpected console statement (no-console from custom rules) - console.log('x is greater than 5'); - } else { - // Unexpected console statement (no-console from custom rules) - console.log('x is not greater than 5'); - } +if (x > 5) { + // Unexpected console statement (no-console from configured rules) + console.log('x is greater than 5'); +} else { + // Unexpected console statement (no-console from configured rules) + console.log('x is not greater than 5'); +} -// 'subtract' is defined but never used (no-unused-vars from custom rules) +// 'subtract' is defined but never used (no-unused-vars from configured rules) function subtract(a, b) { return a - b; } diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index e584e807a62..07eb3aa9efa 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -77,7 +77,7 @@ 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 }); + return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig, fix: true }); } ``` @@ -92,7 +92,7 @@ The static method `ESLint.outputFixes()` takes the linting results from the call // ... previous step's code to instantiate the ESLint instance -// Lint the specified files and return the error results +// Lint the specified files and return the results async function lintAndFix(eslint, filePaths) { const results = await eslint.lintFiles(filePaths); @@ -105,7 +105,7 @@ async function lintAndFix(eslint, filePaths) { ## Step 4: Output Results -Define a function to output the linting results to the consoles. 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: @@ -117,7 +117,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) { - if (results.length) { + // ID 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 { @@ -169,10 +172,10 @@ 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 }); + return new ESLint({ useEslintrc: false, overrideConfig: overrideConfig, fix: true }); } -// Lint the specified files and return the lint results +// Lint the specified files and return the results async function lintAndFix(eslint, filePaths) { const results = await eslint.lintFiles(filePaths); @@ -184,7 +187,10 @@ async function lintAndFix(eslint, filePaths) { // Log results to console if there are any problems function outputLintingResults(results) { - if (results.length) { + // ID 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 { From 01dbfde1e71ac0605de1674009e347a95b4cae20 Mon Sep 17 00:00:00 2001 From: Ben Perlmutter Date: Mon, 19 Jun 2023 15:15:26 -0400 Subject: [PATCH 19/19] copy edit --- .../integration-tutorial-code/example-eslint-integration.js | 2 +- docs/src/integrate/integration-tutorial.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_examples/integration-tutorial-code/example-eslint-integration.js b/docs/_examples/integration-tutorial-code/example-eslint-integration.js index d04234ee55e..f36b4e46e76 100644 --- a/docs/_examples/integration-tutorial-code/example-eslint-integration.js +++ b/docs/_examples/integration-tutorial-code/example-eslint-integration.js @@ -22,7 +22,7 @@ async function lintAndFix(eslint, filePaths) { // Log results to console if there are any problems function outputLintingResults(results) { - // ID the number of problems found + // Identify the number of problems found const problems = results.reduce((acc, result) => acc + result.errorCount + result.warningCount, 0); if (problems > 0) { diff --git a/docs/src/integrate/integration-tutorial.md b/docs/src/integrate/integration-tutorial.md index 07eb3aa9efa..08d77c7253b 100644 --- a/docs/src/integrate/integration-tutorial.md +++ b/docs/src/integrate/integration-tutorial.md @@ -117,7 +117,7 @@ In this example, we'll simply log the results to the console: // Log results to console if there are any problems function outputLintingResults(results) { - // ID the number of problems found + // Identify the number of problems found const problems = results.reduce((acc, result) => acc + result.errorCount + result.warningCount, 0); if (problems > 0) { @@ -187,7 +187,7 @@ async function lintAndFix(eslint, filePaths) { // Log results to console if there are any problems function outputLintingResults(results) { - // ID the number of problems found + // Identify the number of problems found const problems = results.reduce((acc, result) => acc + result.errorCount + result.warningCount, 0); if (problems > 0) {