1. Visual Studio Code Setting

Essential Extensions for Visual Studio Code when coding React

• Atom One Dark Theme: Atom theme for VSCode, much nicer than default theme. Code inspiration
• Auto Close Tag: Auto close tag in code HTML, JSX
• Auto Rename Tag: Automatically rename tags when coding HTML, JSX. Combined with Auto Close Tag will make a great duo
• Bookmarks: Highlight lines of code for easy searching. When your code is long, having to scroll up, scroll down to find and code is quite tiring. Now just mark the location, then you just need to point to that location and the editor will open right at the bookmark position.
• Bracket Pair Colorizer: Help distinguish the when it becomes too much
• Code Spelling Checker: Check spelling when coding (English only)
• EditorConfig: To run the .editorconfig file, which is very convenient, I will talk about this file below
• ES7 React/Redux/React-Native/JS snippets: Snippet for React, Redux
• ESLint: ESLint for editor
• GitLens: Manage code better with git, show file changers, commits, etc.
• html to JSX: Convert HTML to JSX
• Live Server: Make the server auto reload when the html code is static
• Material Icon Theme: Add theme icons for files and folders to help you identify files quickly
• Prettier: Format code beautiful and genuine
• SVG Viewer: View svg images on editor
• VSCode-styled-components: Highlight and auto-complete for styled-component like when coding on css file

2. Setup Workspace

For those of you who don't know, VS Code has 2 types of settings, one is for the user, the other is for the workspace. If you do not set the workspace, by default VS Code will get the settings in the user. In this article, we only set the workspace.

And setting also has 2 ways of setting, 1 is setting by JSON file, 2 is by UI. Here, I set it up with a JSON file to make it easier to see. Create file ./vscode/settings.json in home directory

  {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
  }

IN_WHICH

• We choose Default Formatter as Prettier.
• "editor.formatOnSave: true"so that when saving, it will automatically format (with ESLint or with Prettier, as we have defined above)
• "eslint.format.enable: true" to enable ESLint's code formatting feature
• "source.fixAll.eslint": true so that when you save it ESLint will automatically format and fix errors ESLint for us.

Add more recommended extension into workspace, so that when anyone opens the source code, VS Code will recommend installing these extensions. You need add more file extensions.json in folder .vscode. These are the extensions I just listed above, you just need to copy this file and put it in the source, the editor will display the recommended extension, no need to search for each one.

  {
    "recommendations": [
      "mikael.angular-beastcode",
      "angular.ng-template",
      "coenraads.bracket-pair-colorizer",
      "mikestead.dotenv",
      "dsznajder.es7-react-js-snippets",
      "dbaeumer.vscode-eslint",
      "mkxml.vscode-filesize",
      "ritwickdey.liveserver",
      "davidanson.vscode-markdownlint",
      "pkief.material-icon-theme",
      "zhuangtongfa.material-theme",
      "esbenp.prettier-vscode",
      "syler.sass-indented",
      "octref.vetur",
      "ms-vscode.vscode-typescript-tslint-plugin",
      "visualstudioexptteam.vscodeintellicode",
      "formulahendry.code-runner"
    ]
  }

When working in Teams, to unify extensions and settings among members, we should share the .vscode folder (just leave it in the source, don't put it in .gitignore ).

3. Add file .editorconfig

If you do not know, EditorConfig was born to unify standards between different editors. For example, someone use indent as space, someone use tab; someone indent 2, others 4. EditorConfig makes our code more consistent, readable and maintainable.

You create the file .editorconfig in the main directory of the project. Because we already have the Editor Config extension installed above, when we create this file, the browser will automatically receive these settings.

  [*]
  end_of_line = lf
  indent_style = space
  indent_size = 2

4. Install ESLint and Prettier for React

Here I use Create React App, so by default, people have already installed the basic ESLint suite, I just need to install a few more things and the project will be smooth. Please follow the steps below

Create a .env file in the root directory and add this value to EXTEND_ESLINT=true. The purpose is to make it possible for us to add other linters to React.

Install the following package npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Add this script in package.json (scripts section). Here I use Typescript and maybe Javascript, so I set it as js, jsx, ts, tsx

  "lint": "eslint --ext js,jsx,ts,tsx src/",
  "lint:fix": "eslint --fix --ext js,jsx,ts,tsx src/",
  "prettier": "prettier --check "src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)"",
  "prettier:fix": "prettier --write "src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)""
  

With the above commands, we just need to npm lint and eslint will scan the entire project for errors, npm lint:fix will automatically fix the entire project. Similar to prettier

Create the file .prettierrc. This file specifies the rules for Prettier

  {
    "arrowParens": "avoid",
    "semi": false,
    "trailingComma": "none",
    "endOfLine": "lf",
    "tabWidth": 2,
    "printWidth": 80,
    "useTabs": false
  }
  

Create a .prettierignore file. This file tells Prettier not to format at the paths specified here

  .cache
   package-lock.json
  

Create .eslintrc file. This file is intended to extend the ESLint React configuration to help catch errors on the terminal, if you have installed the ESLint extension, it will rely on this file to catch errors directly on the editor.

  {
    "extends": ["react-app", "prettier"],
    "plugins": ["react", "prettier"],
    "rules": {
      "prettier/prettier": [
        "warn",
        {
          "arrowParens": "avoid",
          "semi": false,
          "trailingComma": "none",
          "endOfLine": "lf",
          "tabWidth": 2,
          "printWidth": 80,
          "useTabs": false
        }
      ],
      "no-console": "warn"
    }
  }
  

We have added some Prettier rules as entered in .prettierrc to ESLint so that ESLint catches errors in case we forget to format

  /src/serviceWorker.js
  /src/setupTests.js.js
  

In Summary

That's it, above is the configuration that I use for my current React projects. Hope to make your project cleaner and smoother. You can change some places to suit your own style, not necessarily exactly the same 😆

In the next post, I will go into the analysis of the best practice React folder structure. Have a nice weekend everyone

Link Github: https://github.com/nguyenvuhoang/React-Folder-Structure