Combine a few articles on setting up your editor

Author: selbekk

docusaurus/docs/debugging-in-the-editor.md

@@ -0,0 +1,131 @@
+---
+id: setting-up-your-editor
+title: Setting up your Editor
+sidebar_label: Setting up your Editor
+---
+
+## Syntax highlighting
+
+To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.
+
+## Displaying Lint Output in the Editor
+
+> Note: this feature is available with `[email protected]` and higher.<br>
+> It also only works with npm 3 or higher.
+
+Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
+
+They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.
+
+You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root:
+
+```js
+{
+  "extends": "react-app"
+}
+```
+
+Now your editor should report the linting warnings.
+
+Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
+
+If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules.
+
+## Debugging in the Editor
+
+**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) and [WebStorm](https://www.jetbrains.com/webstorm/).**
+
+Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.
+
+### Visual Studio Code
+
+You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed.
+
+Then add the block below to your `launch.json` file and put it inside the `.vscode` folder in your app’s root directory.
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceRoot}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}
+```
+
+> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](/docs/advanced-configuration).
+
+Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
+
+Having problems with VS Code Debugging? Please see their [troubleshooting guide](https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md#troubleshooting).
+
+### WebStorm
+
+You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetBrains IDE Support](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed.
+
+In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration.
+
+> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](/docs/advanced-configuration).
+
+Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.
+
+The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
+
+## Formatting Code Automatically
+
+Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/).
+
+To format our code whenever we make a commit in git, we need to install the following dependencies:
+
+```sh
+npm install --save husky lint-staged prettier
+```
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add husky lint-staged prettier
+```
+
+- `husky` makes it easy to use githooks as if they are npm scripts.
+- `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
+- `prettier` is the JavaScript formatter we will run before commits.
+
+Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
+
+Add the following field to the `package.json` section:
+
+```diff
++  "husky": {
++    "hooks": {
++      "pre-commit": "lint-staged"
++    }
++  }
+```
+
+Next we add a 'lint-staged' field to the `package.json`, for example:
+
+```diff
+  "dependencies": {
+    // ...
+  },
++ "lint-staged": {
++   "src/**/*.{js,jsx,json,css}": [
++     "prettier --single-quote --write",
++     "git add"
++   ]
++ },
+  "scripts": {
+```
+
+Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time.
+
+Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://prettier.io/docs/en/editors.html) on the Prettier GitHub page.

docusaurus/docs/formatting-code-automatically.md

@@ -55,9 +55,6 @@
       "code-splitting": {
         "title": "Code Splitting"
       },
-      "debugging-in-the-editor": {
-        "title": "Debugging in the Editor"
-      },
       "debugging-tests": {
         "title": "Debugging Tests",
         "sidebar_label": "Debugging tests"
@@ -79,10 +76,6 @@
       "folder-structure": {
         "title": "Folder structure"
       },
-      "formatting-code-automatically": {
-        "title": "Formatting Code Automatically",
-        "sidebar_label": "Formatting code"
-      },
       "generating-dynamic-meta-tags-on-the-server": {
         "title": "Generating Dynamic `<meta>` Tags on the Server"
       },
@@ -102,10 +95,6 @@
       "integrating-with-an-api-backend": {
         "title": "Integrating with an API Backend"
       },
-      "lint-output-in-the-editor": {
-        "title": "Displaying Lint Output in the Editor",
-        "sidebar_label": "In-editor linting"
-      },
       "making-a-progressive-web-app": {
         "title": "Making a Progressive Web App"
       },
@@ -131,6 +120,10 @@
         "title": "Sending feedback",
         "sidebar_label": "Feedback"
       },
+      "setting-up-your-editor": {
+        "title": "Setting up your Editor",
+        "sidebar_label": "Setting up your Editor"
+      },
       "something-missing": {
         "title": "Something missing?",
         "sidebar_label": "Something missing?"
@@ -139,10 +132,6 @@
         "title": "Supported Browsers and Features",
         "sidebar_label": "Browsers and Features"
       },
-      "syntax-highlighting-in-the-editor": {
-        "title": "Syntax highlighting in the editor",
-        "sidebar_label": "Syntax highlighting"
-      },
       "troubleshooting": {
         "title": "Troubleshooting",
         "sidebar_label": "Troubleshooting"

docusaurus/docs/lint-output-in-the-editor.md

@@ -11,10 +11,7 @@
       "updating-to-new-releases"
     ],
     "Development": [
-      "syntax-highlighting-in-the-editor", 
-      "lint-output-in-the-editor", 
-      "debugging-in-the-editor",
-      "formatting-code-automatically",
+      "setting-up-your-editor",
       "developing-components-in-isolation",
       "analyzing-the-bundle-size",
       "using-https-in-development"