complete-lint 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -10
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -36,8 +36,8 @@ Create a `eslint.config.mjs` file in the root of your repository:
|
|
|
36
36
|
|
|
37
37
|
// @ts-check
|
|
38
38
|
|
|
39
|
-
import tseslint from "typescript-eslint";
|
|
40
39
|
import { completeConfigBase } from "eslint-config-complete";
|
|
40
|
+
import tseslint from "typescript-eslint";
|
|
41
41
|
|
|
42
42
|
export default tseslint.config(
|
|
43
43
|
// We use "eslint-config-complete" as the base of the config:
|
|
@@ -83,7 +83,7 @@ const config = {
|
|
|
83
83
|
export default config;
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
### Step 4 -
|
|
86
|
+
### Step 4 - Editor Integration
|
|
87
87
|
|
|
88
88
|
You will probably want to set up your code editor such that both ESLint and Prettier are automatically run every time the file is saved. Below, we show how to do that with [VSCode](https://code.visualstudio.com/), the most popular TypeScript editor / IDE. It is also possible to set this up in other editors such as [Webstorm](https://www.jetbrains.com/webstorm/) and [Neovim](https://neovim.io/), but we don't provide detailed instructions for that here.
|
|
89
89
|
|
|
@@ -147,7 +147,7 @@ Optionally, you can also provide a hint to anyone cloning your repository that t
|
|
|
147
147
|
|
|
148
148
|
### Step 5 - Create a Lint Script
|
|
149
149
|
|
|
150
|
-
At this point, we should be able to see squiggly lines when errors happen, making for a nice editor experience. However, there might be errors in files that are not currently open in our editor. Thus, we might want to run a command to check the entire repository for errors. Since we use several different tools, we need to run several different commands to invoke each tool. One way to accomplish this is to create a
|
|
150
|
+
At this point, we should be able to see squiggly lines when errors happen, making for a nice editor experience. However, there might be errors in files that are not currently open in our editor. Thus, we might want to run a command to check the entire repository for errors. Since we use several different tools, we need to run several different commands to invoke each tool. One way to accomplish this is to create a `./scripts/lint.ts` file that runs all the tools in parallel:
|
|
151
151
|
|
|
152
152
|
```ts
|
|
153
153
|
import { $, lintScript } from "complete-node";
|
|
@@ -232,12 +232,14 @@ jobs:
|
|
|
232
232
|
These are the specific packages that `complete-lint` provides:
|
|
233
233
|
|
|
234
234
|
- [`@prettier/plugin-xml`](https://github.com/prettier/plugin-xml) - Allows Prettier to format XML files, which are common in some kinds of projects.
|
|
235
|
-
- [
|
|
235
|
+
- [`@types/node`](https://www.npmjs.com/package/@types/node) - The types for the Node.js runtime. This is included since it is expected that you will be linting your project with a TypeScript script.
|
|
236
|
+
- [`complete-node`](/complete-node) - A library that allows you to easily create a linting script to run several tools at once.
|
|
237
|
+
- [`complete-tsconfig`](/complete-tsconfig) - A collection of TypeScript configuration files that allow for maximum safety.
|
|
236
238
|
- [`cspell`](https://github.com/streetsidesoftware/cspell) - A spell checker for code that is intended to be paired with the [Code Spell Checker VSCode extension](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker). Even though this does not have to do with ESLint or Prettier, this is included in the meta-package because most projects should be linting for misspelled words.
|
|
237
239
|
- [`cspell-check-unused-words`](https://github.com/Zamiell/cspell-check-unused-words) - A helpful script that can detect unused words inside your CSpell configuration, allowing you to clean up unnecessary entries.
|
|
238
240
|
- [`eslint`](https://github.com/eslint/eslint) - The main linter engine for JavaScript/TypeScript, as explained above.
|
|
239
241
|
- [`eslint-import-resolver-typescript`](https://github.com/import-js/eslint-import-resolver-typescript) - Necessary for `eslint-plugin-import-x` to work properly, which is part of `eslint-config-complete`. (Even though it is a direct dependency of `eslint-config-complete`, it does not work properly when it is a nested transitive dependency, so it must explicitly be in this package.)
|
|
240
|
-
- [`eslint-config-complete`](
|
|
242
|
+
- [`eslint-config-complete`](/eslint-config-complete) - Contains the master ESLint configuration.
|
|
241
243
|
- [`knip`](https://github.com/webpro/knip) - A tool to look for unused files, dependencies, and exports. Even though this does not have to do with ESLint or Prettier, this is included in the meta-package because most projects should be linting for unused exports.
|
|
242
244
|
- [`prettier`](https://github.com/prettier/prettier) - The main code formatter, as explained above.
|
|
243
245
|
- [`prettier-plugin-organize-imports`](https://github.com/simonhaenisch/prettier-plugin-organize-imports) - A plugin used because Prettier will not organize imports automatically.
|
|
@@ -246,11 +248,11 @@ These are the specific packages that `complete-lint` provides:
|
|
|
246
248
|
|
|
247
249
|
## Why Code Formatting is Important
|
|
248
250
|
|
|
249
|
-
In the 90's, the most popular scripting language in the world was [Perl](https://www.perl.org/), invented by [Larry Wall](https://en.wikipedia.org/wiki/Larry_Wall). One of Larry's slogans was that "There Is Always More Than One Way To Do It", abbreviated as the TIAMTOWTDI principle. In Perl, there were many different ways to do even the most basic thing, like adding an element to an array. This resulted in a Perl ecosystem where programs often looked nothing like each other, where everyone had different coding styles, and where everything was hard to read and comprehend.
|
|
251
|
+
In the 90's, the most popular scripting language in the world was [Perl](https://www.perl.org/), invented by [Larry Wall](https://en.wikipedia.org/wiki/Larry_Wall). One of Larry's slogans was that "There Is Always More Than One Way To Do It", abbreviated as the TIAMTOWTDI principle. In Perl, there were many different ways to do even the most basic thing, like adding an element to an array. This resulted in a Perl ecosystem where programs often looked nothing like each other, where everyone had different coding styles, and where everything was hard to read and comprehend.
|
|
250
252
|
|
|
251
|
-
One of the key insights of [Guido van Rossum](https://en.wikipedia.org/wiki/Guido_van_Rossum), the creator of the [Python](https://www.python.org/) programming language, was that [code is read much more often than it is written](https://www.python.org/dev/peps/pep-0008/). Python was designed to be concise, clean, and readable. It had standard ways of doing things and recommended that everyone follow the [PEP-8 coding standard](https://www.python.org/dev/peps/pep-0008/). And so, in the 90s, there was a massive movement away from Perl and towards Python. Now, Python is the [most popular programming language in the world](https://pypl.github.io/PYPL.html).
|
|
253
|
+
One of the key insights of [Guido van Rossum](https://en.wikipedia.org/wiki/Guido_van_Rossum), the creator of the [Python](https://www.python.org/) programming language, was that [code is read much more often than it is written](https://www.python.org/dev/peps/pep-0008/). Python was designed to be concise, clean, and readable. It had standard ways of doing things and recommended that everyone follow the [PEP-8 coding standard](https://www.python.org/dev/peps/pep-0008/). And so, in the 90s, there was a massive movement away from Perl and towards Python. Now, Python is the [most popular programming language in the world](https://pypl.github.io/PYPL.html).
|
|
252
254
|
|
|
253
|
-
[Go](https://golang.org/), the programming language designed at Google in 2009, took this concept a step further. They included a code formatter inside of the language itself, called `gofmt` (which is short for "Go formatter"). When you are coding a Go program, it will automatically format all of the code as soon as you save the file. This can be surprising and disturbing for newcomers: "Why does `gofmt` make my code ugly?!"
|
|
255
|
+
[Go](https://golang.org/), the programming language designed at Google in 2009, took this concept a step further. They included a code formatter inside of the language itself, called `gofmt` (which is short for "Go formatter"). When you are coding a Go program, it will automatically format all of the code as soon as you save the file. This can be surprising and disturbing for newcomers: "Why does `gofmt` make my code ugly?!"
|
|
254
256
|
|
|
255
257
|
However, once people get used to the formatter, they realize that it saves them a _tremendous amount of time_. By ignoring all formatting and typing out code "raw", and then summoning the formatter to instantly fix everything, you can quite literally code twice as fast. Rob Pike, one of the creators of Go, famously said that "gofmt's style is no one's favorite, yet gofmt is everyone's favorite". ([This YouTube clip](https://www.youtube.com/embed/PAAkCSZUG1c?start=523&end=568) of Rob is a much-watch!)
|
|
256
258
|
|
|
@@ -270,13 +272,13 @@ In JavaScript and TypeScript land, there isn't an official code formatting stand
|
|
|
270
272
|
|
|
271
273
|
In `complete-lint`, we choose we choose the Prettier style for code formatting, since it is the most popular TypeScript style. Any ESLint rules that conflict with Prettier are turned off with [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier).
|
|
272
274
|
|
|
273
|
-
Prettier handles almost everything, but the `complete-lint` linting config also has a few formatting-related rules turned on, like [`complete/format-jsdoc-comments`](
|
|
275
|
+
Prettier handles almost everything, but the `complete-lint` linting config also has a few formatting-related rules turned on, like [`complete/format-jsdoc-comments`](/eslint-plugin-complete/rules/format-jsdoc-comments) (since Prettier does not format comments).
|
|
274
276
|
|
|
275
277
|
### ESLint
|
|
276
278
|
|
|
277
279
|
ESLint is the best tool to lint JavaScript and TypeScript, as it has a massive ecosystem of rules and plugins that can help find errors in your codebase.
|
|
278
280
|
|
|
279
|
-
With `complete-lint`, the philosophy is that we want to enable as many lint rules as possible, so that we can catch as many bugs as possible. It takes a lot of work to figure out which rules to turn on and which to not bother with, but we've done it for you. This is documented in more detail on [the docs for `eslint-config-complete`](
|
|
281
|
+
With `complete-lint`, the philosophy is that we want to enable as many lint rules as possible, so that we can catch as many bugs as possible. It takes a lot of work to figure out which rules to turn on and which to not bother with, but we've done it for you. This is documented in more detail on [the docs for `eslint-config-complete`](/eslint-config-complete).
|
|
280
282
|
|
|
281
283
|
### Using Prettier & ESLint Together
|
|
282
284
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "complete-lint",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "A linting dependency meta-package for TypeScript projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lint",
|
|
@@ -26,13 +26,15 @@
|
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@prettier/plugin-xml": "^3.4.1",
|
|
29
|
+
"@types/node": "^22.5.4",
|
|
29
30
|
"complete-node": "^1.1.0",
|
|
31
|
+
"complete-tsconfig": "^1.0.0",
|
|
30
32
|
"cspell": "^8.14.2",
|
|
31
33
|
"cspell-check-unused-words": "^1.3.1",
|
|
32
34
|
"eslint": "^9.10.0",
|
|
33
35
|
"eslint-config-complete": "^1.2.0",
|
|
34
36
|
"eslint-import-resolver-typescript": "^3.6.3",
|
|
35
|
-
"knip": "^5.30.
|
|
37
|
+
"knip": "^5.30.1",
|
|
36
38
|
"prettier": "^3.3.3",
|
|
37
39
|
"prettier-plugin-organize-imports": "^4.0.0",
|
|
38
40
|
"prettier-plugin-packagejson": "^2.5.2",
|