Skip to content
Merged
Show file tree
Hide file tree
Changes from all 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
132 changes: 86 additions & 46 deletions src/docs/guide/usage/linter/generated-rules.md

Large diffs are not rendered by default.

63 changes: 63 additions & 0 deletions src/docs/guide/usage/linter/rules/eslint/prefer-template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!-- This file is auto-generated by tasks/website/src/linter/rules/doc_page.rs. Do not edit it manually. -->

<script setup>
import { data } from '../version.data.js';
const source = `https://github.com/oxc-project/oxc/blob/${ data }/crates/oxc_linter/src/rules/eslint/prefer_template.rs`;
</script>

# eslint/prefer-template <Badge type="info" text="Style" />

<div class="rule-meta">
<Alert class="fix" type="info">
<span class="emoji">🚧</span> An auto-fix is still under development.
</Alert>
</div>

### What it does

Require template literals instead of string concatenation.

### Why is this bad?

In ES2015 (ES6), we can use template literals instead of string concatenation.

### Examples

Examples of **incorrect** code for this rule:

```js
const str = "Hello, " + name + "!";
const str1 = "Time: " + (12 * 60 * 60 * 1000);
```

Examples of **correct** code for this rule:

```js
const str = "Hello World!";
const str2 = `Time: ${12 * 60 * 60 * 1000}`;
const str4 = "Hello, " + "World!";
```

## How to use

To **enable** this rule in the CLI or using the config file, you can use:

::: code-group

```bash [CLI]
oxlint --deny prefer-template
```

```json [Config (.oxlintrc.json)]
{
"rules": {
"prefer-template": "error"
}
}
```

:::

## References

- <a v-bind:href="source" target="_blank" rel="noreferrer">Rule Source</a>
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const source = `https://github.com/oxc-project/oxc/blob/${ data }/crates/oxc_lin

<div class="rule-meta">
<Alert class="fix" type="info">
<span class="emoji">🚧</span> An auto-fix is still under development.
<span class="emoji">⚠️💡</span> A dangerous suggestion is available for this rule.
</Alert>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const source = `https://github.com/oxc-project/oxc/blob/${ data }/crates/oxc_lin

<div class="rule-meta">
<Alert class="fix" type="info">
<span class="emoji">🚧</span> An auto-fix is still under development.
<span class="emoji">🛠️</span> An auto-fix is available for this rule.
</Alert>
</div>

Expand Down
104 changes: 104 additions & 0 deletions src/docs/guide/usage/linter/rules/react/jsx-fragments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!-- This file is auto-generated by tasks/website/src/linter/rules/doc_page.rs. Do not edit it manually. -->

<script setup>
import { data } from '../version.data.js';
const source = `https://github.com/oxc-project/oxc/blob/${ data }/crates/oxc_linter/src/rules/react/jsx_fragments.rs`;
</script>

# react/jsx-fragments <Badge type="info" text="Style" />

<div class="rule-meta">
<Alert class="fix" type="info">
<span class="emoji">🛠️</span> An auto-fix is available for this rule.
</Alert>
</div>

### What it does

Enforces the shorthand or standard form for React Fragments.

### Why is this bad?

Makes code using fragments more consistent one way or the other.

### Options

`{ "mode": "syntax" | "element" }`

#### `syntax` mode

This is the default mode. It will enforce the shorthand syntax for React fragments, with one exception.
Keys or attributes are not supported by the shorthand syntax, so the rule will not warn on standard-form fragments that use those.

Examples of **incorrect** code for this rule:

```jsx
<React.Fragment>
<Foo />
</React.Fragment>;
```

Examples of **correct** code for this rule:

```jsx
<>
<Foo />
</>;
```

```jsx
<React.Fragment key="key">
<Foo />
</React.Fragment>;
```

#### `element` mode

This mode enforces the standard form for React fragments.

Examples of **incorrect** code for this rule:

```jsx
<>
<Foo />
</>;
```

Examples of **correct** code for this rule:

```jsx
<React.Fragment>
<Foo />
</React.Fragment>;
```

```jsx
<React.Fragment key="key">
<Foo />
</React.Fragment>;
```

## How to use

To **enable** this rule in the CLI or using the config file, you can use:

::: code-group

```bash [CLI]
oxlint --deny react/jsx-fragments --react-plugin
```

```json [Config (.oxlintrc.json)]
{
"plugins": ["react"],
"rules": {
"react/jsx-fragments": "error"
}
}
```

:::

## References

- <a v-bind:href="source" target="_blank" rel="noreferrer">Rule Source</a>
84 changes: 84 additions & 0 deletions src/docs/guide/usage/linter/rules/typescript/await-thenable.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!-- This file is auto-generated by tasks/website/src/linter/rules/doc_page.rs. Do not edit it manually. -->

<script setup>
import { data } from '../version.data.js';
const source = `https://github.com/oxc-project/oxc/blob/${ data }/crates/oxc_linter/src/rules/typescript/await_thenable.rs`;
</script>

# typescript/await-thenable <Badge type="info" text="Correctness" />

<div class="rule-meta">
<Alert class="default-on" type="success">
<span class="emoji">✅</span> This rule is turned on by default.
</Alert>
<Alert class="fix" type="info">
<span class="emoji">🚧</span> An auto-fix is still under development.
</Alert>
</div>

### What it does

This rule disallows awaiting a value that is not a Thenable.

### Why is this bad?

While it is valid JavaScript to await a non-Promise-like value (it will resolve immediately), this practice can be confusing for readers who are not aware of this behavior. It can also be a sign of a programmer error, such as forgetting to add parentheses to call a function that returns a Promise.

### Examples

Examples of **incorrect** code for this rule:

```ts
await 12;
await (() => {});

// non-Promise values
await Math.random;
await { then() {} };

// this is not a Promise - it's a function that returns a Promise
declare const getPromise: () => Promise<string>;
await getPromise;
```

Examples of **correct** code for this rule:

```ts
await Promise.resolve("value");
await Promise.reject(new Error());

// Promise-like values
await {
then(onfulfilled, onrejected) {
onfulfilled("value");
},
};

// this is a Promise - produced by calling a function
declare const getPromise: () => Promise<string>;
await getPromise();
```

## How to use

To **enable** this rule in the CLI or using the config file, you can use:

::: code-group

```bash [CLI]
oxlint --deny typescript/await-thenable
```

```json [Config (.oxlintrc.json)]
{
"rules": {
"typescript/await-thenable": "error"
}
}
```

:::

## References

- <a v-bind:href="source" target="_blank" rel="noreferrer">Rule Source</a>
72 changes: 72 additions & 0 deletions src/docs/guide/usage/linter/rules/typescript/no-array-delete.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!-- This file is auto-generated by tasks/website/src/linter/rules/doc_page.rs. Do not edit it manually. -->

<script setup>
import { data } from '../version.data.js';
const source = `https://github.com/oxc-project/oxc/blob/${ data }/crates/oxc_linter/src/rules/typescript/no_array_delete.rs`;
</script>

# typescript/no-array-delete <Badge type="info" text="Correctness" />

<div class="rule-meta">
<Alert class="default-on" type="success">
<span class="emoji">✅</span> This rule is turned on by default.
</Alert>
<Alert class="fix" type="info">
<span class="emoji">🚧</span> An auto-fix is still under development.
</Alert>
</div>

### What it does

This rule disallows using the delete operator on array values.

### Why is this bad?

When using the delete operator on an array, the element is not actually removed, but instead the array slot is turned into undefined. This is usually not the intended behavior. Instead, you should use methods like Array.prototype.splice() to properly remove elements from an array.

### Examples

Examples of **incorrect** code for this rule:

```ts
declare const arr: number[];
delete arr[0];
```

Examples of **correct** code for this rule:

```ts
declare const arr: number[];
arr.splice(0, 1);

// or with a filter
const filteredArr = arr.filter((_, index) => index !== 0);

// delete on object is allowed
declare const obj: { a?: number };
delete obj.a;
```

## How to use

To **enable** this rule in the CLI or using the config file, you can use:

::: code-group

```bash [CLI]
oxlint --deny typescript/no-array-delete
```

```json [Config (.oxlintrc.json)]
{
"rules": {
"typescript/no-array-delete": "error"
}
}
```

:::

## References

- <a v-bind:href="source" target="_blank" rel="noreferrer">Rule Source</a>
Loading