Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

docs: use custom diff code blocks#5099

New issue

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

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

Already on GitHub?Sign in to your account

Merged
bradzacher merged 8 commits intotypescript-eslint:mainfromJosh-Cena:avoid-diff
Jun 10, 2022
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions.cspell.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -73,8 +73,10 @@
"linebreaks",
"lzstring",
"markdownlint",
"metastring",
"necroing",
"nocheck",
"noninteractive",
"nullish",
"OOM",
"OOMs",
Expand Down
34 changes: 18 additions & 16 deletionsdocs/linting/MONOREPO.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,22 +18,24 @@ Earlier in our docs on [typed linting](./TYPED_LINTING.md), we showed you how to

For example, this is how we specify all of our `tsconfig.json` within this repo.

```diff title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
parserOptions: {
tsconfigRootDir: __dirname,
- project: ['./tsconfig.json'],
+ project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
},
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
};
```js title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
parserOptions: {
tsconfigRootDir: __dirname,
// Remove this line
project: ['./tsconfig.json'],
// Add this line
project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
},
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
};
```

If you're looking for an example of what the `.eslintrc.js`, and referenced `tsconfig.json` might look like in a real example, look no further than this very repo. We're a multi-package monorepo that uses one `tsconfig.json` per package, that also uses typed linting.
Expand Down
82 changes: 42 additions & 40 deletionsdocs/linting/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -136,19 +136,18 @@ If you use [`prettier`](https://www.npmjs.com/package/prettier), there is also a

Using this config by adding it to the end of your `extends`:

```diff title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
+ 'prettier',
],
};
```js title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
// Add this line
'prettier',
],
};
```

### Community Configs
Expand All@@ -163,19 +162,20 @@ A few popular all-in-one configs are:
To use one of these complete config packages, you would replace the `extends` with the package name.
For example:

```diff title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
],
extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
+ 'airbnb-typescript',
],
};
```js title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
// Removed lines start
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
// Removed lines end
// Add this line
'airbnb-typescript',
],
};
```

<!-- markdownlint-disable MD044 -->
Expand All@@ -196,20 +196,22 @@ Below are just a few examples:
Every plugin that is out there includes documentation on the various configurations and rules they offer.
A typical plugin might be used like:

```diff title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
+ 'jest',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
+ 'plugin:jest/recommended',
],
};
```js title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
// Add this line
'jest',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
// Add this line
'plugin:jest/recommended',
],
};
```

<!-- markdownlint-disable MD044 -->
Expand Down
15 changes: 9 additions & 6 deletionsdocs/linting/TROUBLESHOOTING.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,12 +42,15 @@ See our docs on [type aware linting](./TYPED_LINTING.md#i-get-errors-telling-me-

You can use `parserOptions.extraFileExtensions` to specify an array of non-TypeScript extensions to allow, for example:

```diff
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
+ extraFileExtensions: ['.vue'],
},
```js title=".eslintrc.js"
module.exports = {
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
// Add this line
extraFileExtensions: ['.vue'],
},
};
```

## One of my lint rules isn't working correctly on a pure JavaScript file
Expand Down
33 changes: 18 additions & 15 deletionsdocs/linting/TYPED_LINTING.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,21 +8,24 @@ Under the hood, the typescript-eslint parser uses TypeScript's compiler APIs to

To tap into TypeScript's additional powers, there are two small changes you need to make to your config file:

```diff title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: ['./tsconfig.json'],
+ },
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
+ 'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
};
```js title=".eslintrc.js"
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
// Added lines start
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
// Added lines end
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
// Add this line
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
};
```

In more detail:
Expand Down
17 changes: 17 additions & 0 deletionspackages/website/docusaurusConfig.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -139,6 +139,23 @@ const themeConfig: ThemeCommonConfig & AlgoliaThemeConfig = {
styles: [],
},
additionalLanguages: ['ignore'],
magicComments: [
{
className: 'theme-code-block-highlighted-line',
line: 'highlight-next-line',
block: { start: 'highlight-start', end: 'highlight-end' },
},
{
className: 'code-block-removed-line',
line: 'Remove this line',
block: { start: 'Removed lines start', end: 'Removed lines end' },
},
{
className: 'code-block-added-line',
line: 'Add this line',
block: { start: 'Added lines start', end: 'Added lines end' },
},
],
Comment on lines +142 to +158
Copy link
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

New Docusaurus feature to add custom metadata to lines—suits this use-case quite well.

I prefer using human-readable identifiers like "Remove this line", but if you want something that stands out more like for machines (e.g. "remove-next-line") just let me know

},
tableOfContents: {
maxHeadingLevel: 4,
Expand Down
1 change: 1 addition & 0 deletionspackages/website/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,6 +26,7 @@
"json5": "^2.2.1",
"konamimojisplosion": "^0.5.1",
"lzstring.ts": "^2.0.2",
"prism-react-renderer": "^1.3.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"remark-docusaurus-tabs": "^0.2.0",
Expand Down
38 changes: 35 additions & 3 deletionspackages/website/src/css/custom.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -109,7 +109,39 @@ h6 {
background-color: var(--code-line-decoration);
}

/* indent the nested checklist for the rule doc attributes */
ul.contains-task-list > li > ul.contains-task-list {
padding-left: 24px;
.code-block-removed-line::before {
content: '-';
display: inline-block;
width: 0px;
position: relative;
left: -0.7em;
color: red;
}

.code-block-removed-line {
background-color: #ff000020;
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
user-select: none;
}

.code-block-added-line::before {
content: '+';
display: inline-block;
width: 0px;
position: relative;
left: -0.7em;
color: rgb(2, 164, 113);
}

.code-block-added-line {
background-color: #00ff9540;
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}

[data-theme='dark'] .code-block-added-line {
background-color: #00ff9510;
}
Loading
[8]ページ先頭
©2009-2025 Movatter.jp