docs: draft of new typescript-eslint website

.cspell.json

@@ -13,7 +13,10 @@
     ".cspell.json",
     "yarn.lock",
     ".github/workflows/**",
-    ".vscode/*.json"
+    ".vscode/*.json",
+    "website/src/vendor/**",
+    "website/build/**",
+    "website/.docusaurus/**"
   ],
   "dictionaries": [
     "typescript",
@@ -66,6 +69,7 @@
     "IIFE",
     "IIFEs",
     "linebreaks",
+    "lzstring",
     "necroing",
     "nocheck",
     "nullish",
@@ -94,6 +98,7 @@
     "transpiled",
     "transpiles",
     "transpiling",
+    "tsvfs",
     "tsconfigs",
     "tsutils",
     "typedef",
@@ -104,7 +109,7 @@
   ],
   "overrides": [
     {
-      "filename": "**/*.{ts,js}",
+      "filename": "**/*.{ts,js,tsx,jsx}",
       "ignoreRegExpList": ["/@[a-z]+/", "/#(end)?region/"],
       "includeRegExpList": [
         "/\\/\\*[\\s\\S]*?\\*\\/|([^\\\\:]|^)\\/\\/.*$/",

.eslintignore

@@ -6,6 +6,15 @@ shared-fixtures
 coverage
 __snapshots__
 
+website/build
+website/.docusaurus
+website/sidebars
+website/webpack.plugin.js
+website/babel.config.js
+website/docusaurus.config.js
+website/src/modules
+website/src/vendor
+
 packages/eslint-plugin-tslint/tests
 
 # Files copied as part of the build

.eslintrc.js

@@ -24,6 +24,8 @@ module.exports = {
       './tsconfig.eslint.json',
       './packages/*/tsconfig.json',
       './tests/integration/tsconfig.json',
+      './website/tsconfig.json',
+      './tests/integration/tsconfig.json',
     ],
     allowAutomaticSingleRunInference: true,
     tsconfigRootDir: __dirname,
@@ -304,5 +306,12 @@ module.exports = {
         'import/no-default-export': 'off',
       },
     },
+    {
+      files: ['website/src/**/*.ts', 'website/src/**/*.tsx'],
+      rules: {
+        'import/no-default-export': 'off',
+        'no-console': 'off',
+      },
+    },
   ],
 };

.gitignore

@@ -5,6 +5,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# Website
+website/.docusaurus
+website/.cache-loader
+website/build
+
 # Runtime data
 pids
 *.pid
@@ -57,7 +62,6 @@ jspm_packages/
 # next.js build output
 .next
 
-
 # Editor-specific metadata folders
 .vs
 

.prettierignore

@@ -16,6 +16,10 @@ CONTRIBUTORS.md
 # Ignore CHANGELOG.md files to avoid issues with automated release job
 CHANGELOG.md
 
+website/.docusaurus
+website/build
+website/src/vendor
+
 # TODO - remove this once prettier supports TS4.1
 packages/scope-manager/tests/fixtures/type-declaration/literal-type1.ts
 packages/scope-manager/tests/fixtures/type-declaration/literal-type2.ts

docs/getting-started/README.md

@@ -1,11 +1,15 @@
-# Getting Started
+---
+title: Getting Started
+sidebar_label: Getting Started
+slug: /
+---
 
 Approaching a monorepo project like this can be pretty daunting and hard to navigate for a new user.
 
 The goal of these docs are to give you a quick overview of the project and all of its the pieces, as well as provide guides to help you get setup.
 
 The docs are broken down into the following categories:
 
-## [I want to lint my TypeScript codebase.](./linting/README.md)
+- [I want to lint my TypeScript codebase.](./linting/README.md)
 
-## [(TODO) I want to write an ESLint plugin in TypeScript.](./plugin-development/README.md)
+- [(TODO) I want to write an ESLint plugin in TypeScript.](./plugin-development/README.md)

docs/getting-started/linting/FAQ.md

@@ -1,23 +1,8 @@
-# Troubleshooting / FAQ
-
-## Table of Contents
-
-- [I am using a rule from ESLint core, and it doesn't work correctly with TypeScript code](#i-am-using-a-rule-from-eslint-core-and-it-doesnt-work-correctly-with-typescript-code)
-- [I get errors telling me "The file must be included in at least one of the projects provided"](#i-get-errors-telling-me-the-file-must-be-included-in-at-least-one-of-the-projects-provided)
-- [I use a framework (like Vue) that requires custom file extensions, and I get errors like "You should add `parserOptions.extraFileExtensions` to your config"](#i-use-a-framework-like-vue-that-requires-custom-file-extensions-and-i-get-errors-like-you-should-add-parseroptionsextrafileextensions-to-your-config)
-- [One of my lint rules isn't working correctly on a pure JavaScript file](#one-of-my-lint-rules-isnt-working-correctly-on-a-pure-javascript-file)
-- [TypeScript should be installed locally](#typescript-should-be-installed-locally)
-- [How can I ban `<specific language feature>`?](#how-can-i-ban-specific-language-feature)
-- [Why don't I see TypeScript errors in my ESLint output?](#why-dont-i-see-typescript-errors-in-my-eslint-output)
-- [I get errors from the `no-undef` rule about global variables not being defined, even though there are no TypeScript errors](#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors)
-- [How do I check to see what versions are installed?](#how-do-i-check-to-see-what-versions-are-installed)
-- [My linting feels really slow](#my-linting-feels-really-slow)
-
 ---
-
-<br />
-<br />
-<br />
+id: troubleshooting
+title: Troubleshooting
+sidebar_label: Troubleshooting
+---
 
 ## I am using a rule from ESLint core, and it doesn't work correctly with TypeScript code
 
@@ -38,16 +23,8 @@ If you don't find an existing extension rule, or the extension rule doesn't work
 
 We release a new version our tooling every week. **_Please_** ensure that you [check our the latest list of "extension" rules](../../../packages/eslint-plugin/README.md#extension-rules) **_before_** filing an issue.
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## I get errors telling me "The file must be included in at least one of the projects provided"
 
 This error means that the file that's being linted is not included in any of the tsconfig files you provided us. A lot of the time this happens when users have test files or similar that are not included.
@@ -56,16 +33,8 @@ There are a couple of solutions to this, depending on what you want to achieve.
 
 See our docs on [type aware linting](./TYPED_LINTING.md#i-get-errors-telling-me-the-file-must-be-included-in-at-least-one-of-the-projects-provided) for solutions to this.
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## I use a framework (like Vue) that requires custom file extensions, and I get errors like "You should add `parserOptions.extraFileExtensions` to your config"
 
 You can use `parserOptions.extraFileExtensions` to specify an array of non-TypeScript extensions to allow, for example:
@@ -78,47 +47,23 @@ You can use `parserOptions.extraFileExtensions` to specify an array of non-TypeS
  },
 ```
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## One of my lint rules isn't working correctly on a pure JavaScript file
 
 This is to be expected - ESLint rules do not check file extensions on purpose, as it causes issues in environments that use non-standard extensions (for example, a `.vue` and a `.md` file can both contain TypeScript code to be linted).
 
 If you have some pure JavaScript code that you do not want to apply certain lint rules to, then you can use [ESLint's `overrides` configuration](https://eslint.org/docs/user-guide/configuring#configuration-based-on-glob-patterns) to turn off certain rules, or even change the parser based on glob patterns.
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## TypeScript should be installed locally
 
 Make sure that you have installed TypeScript locally i.e. by using `npm install typescript`, not `npm install -g typescript`,
 or by using `yarn add typescript`, not `yarn global add typescript`. See https://github.com/typescript-eslint/typescript-eslint/issues/2041 for more information.
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## How can I ban `<specific language feature>`?
 
 ESLint core contains the rule [`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax). This generic rule allows you to specify a [selector](https://eslint.org/docs/developer-guide/selectors) for the code you want to ban, along with a custom error message.
@@ -154,16 +99,8 @@ For example, you can ban enums (or some variation of) using one of the following
 }
 ```
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## Why don't I see TypeScript errors in my ESLint output?
 
 TypeScript's compiler (or whatever your build chain may be) is specifically designed and built to validate the correctness of your codebase.
@@ -173,16 +110,8 @@ Instead, our tooling exists to **_augment_** TypeScript's built in checks with l
 
 [1] - TypeScript computes type information lazily, so us asking for the errors it would produce from the compiler would take an _additional_ ~100ms per file. This doesn't sound like a lot, but depending on the size of your codebase, it can easily add up to between several seconds to several minutes to a lint run.
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## I get errors from the `no-undef` rule about global variables not being defined, even though there are no TypeScript errors
 
 The `no-undef` lint rule does not use TypeScript to determine the global variables that exist - instead, it relies upon ESLint's configuration.
@@ -206,16 +135,8 @@ Note, that for a mixed project including JavaScript and TypeScript, the `no-unde
 
 If you choose to leave on the ESLint `no-undef` lint rule, you can [manually define the set of allowed `globals` in your ESLint config](https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals), and/or you can use one of the [pre-defined environment (`env`) configurations](https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments).
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## How do I check to see what versions are installed?
 
 If you have multiple versions of our tooling, it can cause various bugs for you. This is because ESLint may load a different version each run depending on how you run it - leading to inconsistent lint results.
@@ -225,24 +146,16 @@ Installing our tooling in the root of your project does not mean that only one v
 You can check what versions are installed in your project using the following commands:
 
 ```bash
-$ npm list @typescript-eslint/eslint-plugin @typescript-eslint/parser
-$ yarn list @typescript-eslint/eslint-plugin @typescript-eslint/parser
+npm list @typescript-eslint/eslint-plugin @typescript-eslint/parser
+yarn list @typescript-eslint/eslint-plugin @typescript-eslint/parser
 ```
 
 If you see more than one version installed, then you will have to either use [yarn resolutions](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/) to force a single version, or you will have to downgrade your root versions to match the dependency versions.
 
 **The best course of action in this case is to wait until your dependency releases a new version with support for our latest versions.**
 
-<br />
-<br />
-<br />
-
 ---
 
-<br />
-<br />
-<br />
-
 ## My linting feels really slow
 
 As mentioned in the [type-aware linting doc](./TYPED_LINTING.md), if you're using type-aware linting, your lint times should be roughly the same as your build times.
@@ -263,8 +176,8 @@ This plugin surfaces prettier formatting problems at lint time, helping to ensur
 
 Instead of using this plugin, we recommend using prettier's `--list-different` flag to detect if a file has not been correctly formatted. For example, our CI is setup to run the following command automatically, which blocks diffs that have not been formatted:
 
-```bash
-$ yarn prettier --list-different \"./**/*.{ts,js,json,md}\"
+```bash npm2yarn
+npm run prettier --list-different \"./**/*.{ts,js,json,md}\"
 ```
 
 ### `eslint-plugin-import`
@@ -292,7 +205,3 @@ The following rules do not have equivalent checks in TypeScript, so we recommend
 This rule helps ensure your codebase follows a consistent indentation pattern. However this involves a _lot_ of computations across every single token in a file. Across a large codebase, these can add up, and severely impact performance.
 
 We recommend not using this rule, and instead using a tool like [`prettier`](https://www.npmjs.com/package/prettier) to enforce a standardized formatting.
-
-<br />
-<br />
-<br />

docs/getting-started/linting/MONOREPO.md

@@ -1,4 +1,8 @@
-# Getting Started - Monorepo Configuration
+---
+id: monorepo
+title: Monorepo Configuration
+sidebar_label: Monorepo Configuration
+---
 
 If you're using a monorepo, these docs will help you figure out how to setup typed linting.
 If you don't want to use typed linting, then you can stop here - you don't need to do anything special.
@@ -16,7 +20,7 @@ This setup is pretty easy to configure. Earlier in our docs on [typed linting](.
 
 For example, this is how we specify all of our `tsconfig.json` within this repo.
 
-```diff
+```diff title=".eslintrc.js"
  module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
@@ -53,21 +57,21 @@ If you've only got one, you should inspect the `include` paths. If it doesn't in
 
 The former doesn't always work for everyone if they've got a complex build, adding more paths (like test paths) to `include` could break the build, so in those cases we suggest creating a new config; called `tsconfig.eslint.json`, that looks something like this:
 
-```jsonc
-{
+```js title=".eslintrc.js"
+module.exports = {
   // extend your base config to share compilerOptions, etc
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
+  extends: './tsconfig.json',
+  compilerOptions: {
     // ensure that nobody can accidentally use this config for a build
-    "noEmit": true
+    noEmit: true,
   },
-  "include": [
+  include: [
     // whatever paths you intend to lint
-    "src",
-    "test",
-    "tools"
-  ]
-}
+    'src',
+    'test',
+    'tools',
+  ],
+};
 ```
 
 Of course, ensure you update your `.eslintrc.js` to point at this new config file.