complete-lint 1.0.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/LICENSE +9 -0
- package/README.md +164 -0
- package/package.json +41 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright The Complete Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
+
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
# `complete-lint`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/complete-lint)
|
|
4
|
+
|
|
5
|
+
This is a meta package to install all of the dependencies necessary for [ESLint](https://eslint.org/) & [Prettier](https://prettier.io/) to work with a typical TypeScript project. (ESLint is the best code problem checker & Prettier is the best code formatter.)
|
|
6
|
+
|
|
7
|
+
## Why This Package Is Useful
|
|
8
|
+
|
|
9
|
+
It is a pain to get Prettier & ESLint working with TypeScript. `isaacscript-lint` is designed to make it as easy as possible. Don't clutter your `package.json` file with 15+ different ESLint-related dependencies. Don't bother researching which of the hundreds of existing ESLint rules to turn on and turn off. Just use `isaacscript-lint`.
|
|
10
|
+
|
|
11
|
+
If you are ready to start, see the [installation instructions](#installation-instructions).
|
|
12
|
+
|
|
13
|
+
## Installation Instructions
|
|
14
|
+
|
|
15
|
+
### Step 0 - Get a TypeScript Project Set Up
|
|
16
|
+
|
|
17
|
+
It should have a `package.json` file, a `tsconfig.json` file, and so on.
|
|
18
|
+
|
|
19
|
+
### Step 1 - Install the Dependency
|
|
20
|
+
|
|
21
|
+
```sh
|
|
22
|
+
npm install complete-lint --save-dev
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
(It should be a development dependency because it is only used to lint your code before compilation/deployment.)
|
|
26
|
+
|
|
27
|
+
### Step 2 - Create `eslint.config.mjs`
|
|
28
|
+
|
|
29
|
+
Create a `eslint.config.mjs` file in the root of your repository:
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
// This is the configuration file for ESLint, the TypeScript linter:
|
|
33
|
+
// https://eslint.org/docs/latest/use/configure/
|
|
34
|
+
|
|
35
|
+
import tseslint from "typescript-eslint";
|
|
36
|
+
|
|
37
|
+
export default tseslint.config(
|
|
38
|
+
// The linter base is the complete config:
|
|
39
|
+
// https://github.com/complete-ts/complete/blob/main/packages/eslint-config-complete/base.js
|
|
40
|
+
...complete.recommended,
|
|
41
|
+
|
|
42
|
+
{
|
|
43
|
+
rules: {
|
|
44
|
+
// Insert changed or disabled rules here, if necessary.
|
|
45
|
+
},
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Step 3 - IDE Integration
|
|
51
|
+
|
|
52
|
+
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.
|
|
53
|
+
|
|
54
|
+
### Extensions
|
|
55
|
+
|
|
56
|
+
In order for the linter to work inside of VSCode, you will have to install the following extensions:
|
|
57
|
+
|
|
58
|
+
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
|
|
59
|
+
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
|
60
|
+
|
|
61
|
+
Additionally, you might also want to install the CSpell extension, which is extremely useful to spell check an entire codebase:
|
|
62
|
+
|
|
63
|
+
- [CSpell](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
|
64
|
+
|
|
65
|
+
Once installed, these extensions provide a nice dichotomy:
|
|
66
|
+
|
|
67
|
+
- Red squiggly underlines are type-errors from the TypeScript compiler.
|
|
68
|
+
- Yellow squiggly underlines are warnings from ESLint.
|
|
69
|
+
- Blue squiggly underlines are misspelled words. (You can use "Quick Fix" to find suggestions for the proper spelling. Or, you can right click --> `Spelling` --> `Add Words to CSpell Configuration` to ignore a specific word.)
|
|
70
|
+
|
|
71
|
+
#### `.vscode/settings.json`
|
|
72
|
+
|
|
73
|
+
Furthermore, you will probably want Prettier and ESLint to be run automatically every time you save a TypeScript file. You can tell VSCode to do this by adding the following to your project's `.vscode/settings.json` file:
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
// These are Visual Studio Code settings that should apply to this particular repository.
|
|
77
|
+
{
|
|
78
|
+
"[javascript]": {
|
|
79
|
+
"editor.codeActionsOnSave": {
|
|
80
|
+
"source.fixAll.eslint": "explicit",
|
|
81
|
+
},
|
|
82
|
+
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|
83
|
+
"editor.formatOnSave": true,
|
|
84
|
+
},
|
|
85
|
+
|
|
86
|
+
"[typescript]": {
|
|
87
|
+
"editor.codeActionsOnSave": {
|
|
88
|
+
"source.fixAll.eslint": "explicit",
|
|
89
|
+
},
|
|
90
|
+
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|
91
|
+
"editor.formatOnSave": true,
|
|
92
|
+
},
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
(Create this file if it does not already exist.)
|
|
97
|
+
|
|
98
|
+
You should also commit this file to your project's repository so that this behavior is automatically inherited by anyone who clones the project (and uses VSCode).
|
|
99
|
+
|
|
100
|
+
#### `.vscode/extensions.json`
|
|
101
|
+
|
|
102
|
+
Optionally, you can also provide a hint to anyone cloning your repository that they should install the required extensions by creating a `.vscode/settings.json` file::
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
// These are Visual Studio Code extensions that are intended to be used with this particular
|
|
106
|
+
// repository: https://go.microsoft.com/fwlink/?LinkId=827846
|
|
107
|
+
{
|
|
108
|
+
"recommendations": [
|
|
109
|
+
"esbenp.prettier-vscode", // The TypeScript formatter
|
|
110
|
+
"dbaeumer.vscode-eslint", // The TypeScript linter
|
|
111
|
+
"streetsidesoftware.code-spell-checker", // A spell-checker extension based on CSpell
|
|
112
|
+
],
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Package Documentation
|
|
117
|
+
|
|
118
|
+
- [`@prettier/plugin-xml`](https://github.com/prettier/plugin-xml) - Allows Prettier to format XML files, which are common in some kinds of projects.
|
|
119
|
+
- [`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.
|
|
120
|
+
- [`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.
|
|
121
|
+
- [`eslint`](https://github.com/eslint/eslint) - The main linter engine for JavaScript/TypeScript, as explained above.
|
|
122
|
+
- [`eslint-config-complete`](TODO) - Contains the master ESLint configuration.
|
|
123
|
+
- [`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.
|
|
124
|
+
- [`prettier`](https://github.com/prettier/prettier) - The main code formatter, as explained above.
|
|
125
|
+
- [`prettier-plugin-organize-imports`](https://github.com/simonhaenisch/prettier-plugin-organize-imports) - A plugin used because Prettier will not organize imports automatically.
|
|
126
|
+
- [`prettier-plugin-packagejson`](https://github.com/matzkoh/prettier-plugin-packagejson) - A plugin used because Prettier will not organize "package.json" files automatically.
|
|
127
|
+
|
|
128
|
+
## Why Code Formatting is Important
|
|
129
|
+
|
|
130
|
+
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. <!-- cspell:ignore TIAMTOWTDI -->
|
|
131
|
+
|
|
132
|
+
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). <!-- cspell:ignore Rossum -->
|
|
133
|
+
|
|
134
|
+
[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?!" <!-- cspell:ignore gofmt -->
|
|
135
|
+
|
|
136
|
+
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!)
|
|
137
|
+
|
|
138
|
+
`gofmt` is nice because it saves people from mundane code formatting. But there is also a benefit that is entirely separate and not readily apparent. When looking at other people's Go code on StackOverflow or GitHub, you realize that it looks exactly like your code. It's easy to read and comprehend. And you can copy-paste code snippets from other programs into your own applications without having to change anything! For programmers, this is not the norm, and it feels great - it's the hidden superpower of Go.
|
|
139
|
+
|
|
140
|
+
When Rob says that everyone loves `gofmt`, he isn't lying. Programmers across the world have taken this concept and ran with it. People now use [rustfmt](https://github.com/rust-lang/rustfmt) in [Rust](https://www.rust-lang.org/), [Black](https://github.com/psf/black) in [Python](https://www.python.org/), and [Prettier](https://prettier.io/) in [JavaScript](https://www.javascript.com/) & [TypeScript](https://www.typescriptlang.org/). <!-- cspell:ignore rustfmt -->
|
|
141
|
+
|
|
142
|
+
The root of the problem here is that when people try out a new programming language, they often use the same formatting and conventions that they used in their previous language. This fractures the ecosystem and makes everyone's code inconsistent and hard to read. The lesson of Go is that whenever you code in a new language, you should use the standard style that everyone else uses for that language. In this way, every language can have the superpower that Go has.
|
|
143
|
+
|
|
144
|
+
## Why We Use Prettier & ESLint
|
|
145
|
+
|
|
146
|
+
### Prettier
|
|
147
|
+
|
|
148
|
+
In JavaScript and TypeScript land, there isn't an official code formatting standard like there is in Go, but we can get close.
|
|
149
|
+
|
|
150
|
+
[Prettier](https://prettier.io/) is an auto-formatter for JavaScript/TypeScript. First released in 2017, it has become widespread and is probably considered to be the industry standard in 2023. Prettier works by completely rebuilding your code from scratch using the [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree), which allows it to make better transformations than other tools.
|
|
151
|
+
|
|
152
|
+
In `isaacscript-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).
|
|
153
|
+
|
|
154
|
+
Prettier handles almost everything, but the `isaacscript-lint` linting config also has a few formatting-related rules turned on, like [`isaacscript/format-jsdoc-comments`](https://github.com/IsaacScript/isaacscript/blob/main/packages/eslint-plugin-isaacscript/docs/rules/format-jsdoc-comments.md) (since Prettier does not format comments).
|
|
155
|
+
|
|
156
|
+
### ESLint
|
|
157
|
+
|
|
158
|
+
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.
|
|
159
|
+
|
|
160
|
+
With `isaacscript-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-isaacscript`](https://isaacscript.github.io/eslint-config-isaacscript).
|
|
161
|
+
|
|
162
|
+
### Using Prettier & ESLint Together
|
|
163
|
+
|
|
164
|
+
In order to avoid running two different tools, we could use [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) to run Prettier as an ESLint rule. However, doing this [is not recommended by Prettier](https://prettier.io/docs/en/integrating-with-linters.html). Thus, in order to use `isaacscript-lint`, you should be running both Prettier and ESLint on save. (More info on that is below.)
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "complete-lint",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A linting dependency meta-package for TypeScript projects.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"lint",
|
|
7
|
+
"linting",
|
|
8
|
+
"prettier",
|
|
9
|
+
"eslint"
|
|
10
|
+
],
|
|
11
|
+
"homepage": "https://complete-js.github.io/",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/complete-ts/complete/issues"
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/complete-ts/complete.git"
|
|
18
|
+
},
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"author": "Zamiell",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"files": [
|
|
23
|
+
"LICENSE",
|
|
24
|
+
"package.json",
|
|
25
|
+
"README.md"
|
|
26
|
+
],
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@prettier/plugin-xml": "^3.4.1",
|
|
29
|
+
"cspell": "^8.14.2",
|
|
30
|
+
"cspell-check-unused-words": "^1.3.0",
|
|
31
|
+
"eslint": "^9.9.1",
|
|
32
|
+
"eslint-config-complete": "^4.20.0",
|
|
33
|
+
"knip": "^5.29.2",
|
|
34
|
+
"prettier": "^3.3.3",
|
|
35
|
+
"prettier-plugin-organize-imports": "^4.0.0",
|
|
36
|
+
"prettier-plugin-packagejson": "^2.5.2"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"typescript": ">= 5.0.0"
|
|
40
|
+
}
|
|
41
|
+
}
|