docs: add faq and instructions for editor set up

docs/.vitepress/config.ts

@@ -212,6 +212,10 @@ export default defineConfig({
               text: 'Why',
               link: '/guide/why',
             },
+            {
+              text: 'Integrations',
+              link: '/guide/integrations',
+            },
             {
               text: 'Getting Started',
               link: '/guide/getting-started',

docs/.vitepress/theme/layout/colors.css

@@ -48,6 +48,18 @@ sub {
   color: var(--vp-c-text-2);
 }
 
+kbd {
+  padding: 0.1em 0.6em;
+  background: var(--vp-c-bg-soft-up);
+  color: var(--vp-button-alt-text);
+  border: 1px solid var(--vp-button-alt-border);
+  box-shadow: 0 1px 0 0.5px var(--vp-button-alt-border);
+  border-radius: 0.25rem;
+  font-size: 14px;
+  line-height: 1;
+  margin: 0 0.1em;
+}
+
 @media (min-width: 640px) {
   :root {
     --vp-home-hero-image-filter: blur(56px);

docs/guide/integrations.md

@@ -0,0 +1,37 @@
+---
+title: Integrations
+---
+
+# Integrations
+
+You can set up the ability to fix linting problems when saving in your editor.
+
+![ESLint Plugin Perfectionist usage demo](/public/demo.gif)
+
+## 📟 JetBrains IDE
+
+Open Settings (<kbd>⌘</kbd> + <kbd>,</kbd>), then select Languages & Frameworks / Code Quality Tools / ESLint. Check the box next to "Run eslint --fix on save".
+
+## 📟 Vim
+
+If you are using [ALE Vim plugin](https://github.com/dense-analysis/ale) add the following code to your `.vimrc`:
+
+```vim
+let g:ale_fix_on_save = 1
+```
+
+## 📟 Visual Studio Code
+
+If you are using [ESLint extension](https://github.com/Microsoft/vscode-eslint) for VS Code open your `settings.json` file:
+
+Press <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> and type "Open User Settings (JSON)".
+
+Then add the following code to your `settings.json`:
+
+```json
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  }
+}
+```

readme.md

@@ -156,6 +156,21 @@ export default [
 
 <!-- end auto-generated rules list -->
 
+## ⁉️ FAQ
+
+### Can I automatically fix problems in the editor?
+
+Yes. To do this, you need to enable autofix in ESLint when you save the file in your editor. Instructions for your editor can be found [here](https://eslint-plugin-perfectionist.azat.io/guide/integrations).
+
+### Is it safety?
+
+On the whole, yes. We are very careful to make sure that the work of the plugin does not negatively affect the work of the code. For example, the plugin takes into account spread operators in JSX and objects, comments to the code, exports with `*`. Safety is our priority. If you encounter any problem, you can create an [issue](https://github.com/azat-io/eslint-plugin-perfectionist/issues/new/choose).
+
+### Why not Prettier?
+
+I love Prettier. However, this is not his area of responsibility. Prettier is used for formatting, and ESLint is also used for styling. For example, changing the order of imports can affect how the code works (console.log calls, fetch, style loading). Prettier should not change the AST. There is a cool article about this: ["The Blurry Line Between Formatting and Style"](https://blog.joshuakgoldberg.com/the-blurry-line-between-formatting-and-style) by **@joshuakgoldberg**.
+
+
 ## ⚠️ Troubleshooting
 
 There are rules of ESLint and other ESLint plugins that may conflict with the rules of ESLint Plugin Perfectionist. We strongly recommend that you [disable rules](https://eslint.org/docs/latest/use/configure/rules#using-configuration-files-1) with similar functionality.