Add stylelint integration docs (#5153)

* Add stylelint integration docs

* Add an "Integrating With Linters" docs page

This replaces the eslint page

* PR Feedback

* Update docs/integrating-with-linters.md

Co-Authored-By: BPScott <227292+BPScott@users.noreply.github.com>

docs/eslint.md

@@ -1,65 +0,0 @@
----
-id: eslint
-title: Integrating with ESLint
----
-
-If you are using ESLint, integrating Prettier to your workflow is straightforward.
-
-There are two different ways you might want to integrate Prettier into ESLint. You may enable either one separately, or use both together.
-
-## Use ESLint to run Prettier
-
-If you're already running ESLint in your project and would like to do all of your style checking with a single command execution, you can ask ESLint to run Prettier for you.
-
-Just add Prettier as an ESLint rule using [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
-
-```bash
-yarn add --dev prettier eslint-plugin-prettier
-```
-
-.eslintrc.json:
-
-```json
-{
-  "plugins": ["prettier"],
-  "rules": {
-    "prettier/prettier": "error"
-  }
-}
-```
-
-## Turn off ESLint's formatting rules
-
-Whether you run Prettier via ESLint or run both tools separately, you probably only want to hear about each formatting issue once, and you especially don't want ESLint to complain about formatting "issues" which are simply a different preference than what Prettier does.
-
-So you'll probably want to disable the conflicting rules (while keeping around other rules that Prettier doesn't care about). The easiest way to do this is to use [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier). It's a one liner that can be added on-top of any existing ESLint configuration.
-
-```bash
-yarn add --dev eslint-config-prettier
-```
-
-.eslintrc.json:
-
-```json
-{
-  "extends": ["prettier"]
-}
-```
-
-There are a few rules that this disables that you may want to turn back on as long as you don't use them with particular options which conflict with Prettier. See [the docs](https://github.com/prettier/eslint-config-prettier#special-rules) for details.
-
-## Use both
-
-`eslint-plugin-prettier` exposes a `"recommended"` configuration that turns on both `eslint-plugin-prettier` and `eslint-config-prettier`, all you need in your `.eslintrc.json` is:
-
-```json
-{
-  "extends": ["plugin:prettier/recommended"]
-}
-```
-
-Remember to install both `eslint-plugin-prettier` and `eslint-config-prettier`:
-
-```bash
-yarn add --dev eslint-plugin-prettier eslint-config-prettier
-```

docs/integrating-with-linters.md

@@ -0,0 +1,174 @@
+---
+id: integrating-with-linters
+title: Integrating with Linters
+---
+
+Prettier can be integrated into workflows with existing linting tools.
+This allows you to use Prettier for code formatting concerns, while letting your linter focus on code-quality concerns as outlined in our [comparison with linters](comparison.md).
+
+Whatever linting tool you wish to integrate with, the steps are broadly similar.
+First disable any existing formatting rules in your linter that may conflict with how Prettier wishes to format your code. Then you can either add an extension to your linting tool to format your file with Prettier - so that you only need a single command for format a file, or run your linter then Prettier as separate steps.
+
+All these instructions assume you have already installed `prettier` in your `devDependencies`.
+
+## ESLint
+
+### Disable formatting rules
+
+[`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) is a config that disables rules that conflict with Prettier. Add it to your `devDependencies`, then extend from it within your `.eslintrc` configuration. Make sure to put it last in the `extends` array, so it gets the chance to override other configs.
+
+```bash
+yarn add --dev eslint-config-prettier
+```
+
+Then in `.eslintrc.json`:
+
+```json
+{
+  "extends": ["prettier"]
+}
+```
+
+### Use ESLint to run Prettier
+
+[`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) is a plugin that adds a rule that formats content using Prettier. Add it to your `devDependencies`, then enable the plugin and rule.
+
+```bash
+yarn add --dev eslint-plugin-prettier
+```
+
+Then in `.eslintrc.json`:
+
+```json
+{
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}
+```
+
+### Recommended configuration
+
+`eslint-plugin-prettier` exposes a "recommended" configuration that configures both `eslint-plugin-prettier` and `eslint-config-prettier` in a single step. Add both `eslint-plugin-prettier` and `eslint-config-prettier` as developer dependencies, then extend the recommended config:
+
+```bash
+yarn add --dev eslint-config-prettier eslint-plugin-prettier
+```
+
+Then in `.eslintrc.json`:
+
+```json
+{
+  "extends": ["plugin:prettier/recommended"]
+}
+```
+
+## TSLint
+
+### Disable formatting rules
+
+[`tslint-config-prettier`](https://github.com/alexjoverm/tslint-config-prettier) is a config that disables rules that conflict with Prettier. Add it to your `devDependencies`, then extend from it within your `tslint.json` configuration. Make sure to put it last in the `extends` array, so it gets the chance to override other configs.
+
+```bash
+yarn add --dev tslint-config-prettier
+```
+
+Then in `tslint.json`:
+
+```json
+{
+  "extends": ["tslint-config-prettier"]
+}
+```
+
+### Use TSLint to run Prettier
+
+[`tslint-plugin-prettier`](https://github.com/ikatyang/tslint-plugin-prettier) is a plugin that adds a rule that formats content using Prettier. Add it to your `devDependencies`, then enable the plugin and rule.
+
+```bash
+yarn add --dev tslint-plugin-prettier
+```
+
+Then in `tslint.json`:
+
+```json
+{
+  "extends": ["tslint-plugin-prettier"],
+  "rules": {
+    "prettier": true
+  }
+}
+```
+
+### Recommended configuration
+
+`tslint-plugin-prettier` does not expose a recommended configuration. You should combine the two steps above. Add both `tslint-plugin-prettier` and `tslint-config-prettier` as developer dependencies, then add both sets of config.
+
+```bash
+yarn add --dev tslint-config-prettier tslint-plugin-prettier
+```
+
+Then in `tslint.json`:
+
+```json
+{
+  "extends": ["tslint-plugin-prettier", "tslint-config-prettier"],
+  "rules": {
+    "prettier": true
+  }
+}
+```
+
+## Stylelint
+
+### Disable formatting rules
+
+[`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier) is a config that disables rules that conflict with Prettier. Add it to your `devDependencies`, then extend from it within your `.stylelintrc` configuration. Make sure to put it last in the `extends` array, so it gets the chance to override other configs.
+
+```bash
+yarn add --dev stylelint-config-prettier
+```
+
+Then in `.stylelintrc`:
+
+```json
+{
+  "extends": ["stylelint-config-prettier"]
+}
+```
+
+### Use Stylelint to run Prettier
+
+[`stylelint-prettier`](https://github.com/prettier/stylelint-prettier) is a plugin that adds a rule that formats content using Prettier. Add it to your `devDependencies`, then enable the plugin and rule.
+
+```bash
+yarn add --dev stylelint-prettier
+```
+
+Then in `.stylelintrc`:
+
+```json
+{
+  "plugins": ["stylelint-prettier"],
+  "rules": {
+    "prettier/prettier": true
+  }
+}
+```
+
+### Recommended configuration
+
+`stylelint-prettier` exposes a "recommended" configuration that configures both `stylelint-prettier` and `stylelint-config-prettier` in a single step. Add both `stylelint-prettier` and `stylelint-config-prettier` as developer dependencies, then extend the recommended config:
+
+```bash
+yarn add --dev stylelint-config-prettier stylelint-prettier
+```
+
+Then in `.stylelintrc`:
+
+```json
+{
+  "extends": ["stylelint-prettier/recommended"]
+}
+```

website/sidebars.json

@@ -15,7 +15,7 @@
       "plugins",
       "precommit",
       "watching-files",
-      "eslint",
+      "integrating-with-linters",
       "ignore"
     ],
     "Configuring Prettier": [

website/static/_redirects

@@ -1,6 +1,7 @@
 # Redirect removed doc links
 /docs/:lang/usage.html          /docs/:lang/install.html
 /docs/:lang/usage-options.html  /docs/:lang/options.html
+/docs/:lang/eslint.html         /docs/:lang/integrating-with-linters.html
 
 # Broken blog link
 /blog/2018/05/23/1.13.0.html    /blog/2018/05/27/1.13.0.html