Editor Setup

এই পোস্ট টিতে mainly VSCODE এ react.js এর জন্য কিছু usefull plug-in এর setup দেওয়া হয়েছে ।

Plugins

নিম্নের extention গুলো install দেওয়া থাকতে হবে।

  • ESLint by Dirk Baeumer
  • Prettier - Code formatter by Prettier
  • Dracula Official Theme (optional)

Settings

Follow the below settings for VS Code -

  1. Create a new folder called “.vscode” inside the project root folder
  2. Create a new file called “settings.json” inside that folder.
  3. Paste the below json in the newly created settings.json file and save the file.
{
    // Theme
    "workbench.colorTheme": "Dracula",

    // config related to code formatting
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.formatOnSave": false,
        "editor.defaultFormatter": null
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false,
        "editor.defaultFormatter": null
    },
    "javascript.validate.enable": false, //disable all built-in syntax checking
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.tslint": true,
        "source.organizeImports": true
    },
    "eslint.alwaysShowStatus": true,
    // emmet
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }
}

If you followed all previous steps, the theme should change and your editor should be ready.

Set Line Breaks

Make sure in your VS Code Editor, “LF” is selected as line feed instead of CRLF (Carriage return and line feed). To do that, just click LF/CRLF in bottom right corner of editor, click it and change it to “LF”. If you dont do that, you will get errors in my setup.

Linting Setup

In order to lint and format your React project automatically according to popular airbnb style guide, I recommend you to follow the instructions below.

Install Dev Dependencies

yarn add -D prettier
yarn add -D babel-eslint
npx install-peerdeps --dev eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier

or You can also add a new script in the scripts section like below to install everything with a single command:

scripts: {
    "lint": "yarn add -D prettier && yarn add -D babel-eslint && npx install-peerdeps --dev eslint-config-airbnb && yarn add -D eslint-config-prettier eslint-plugin-prettier"
}

and then simply run the below command in the terminal -

yarn lint #or 'npm run lint'

Create Linting Configuration file manually

Create a .eslintrc file in the project root and enter the below contents:

{
    "extends": [
        "airbnb",
        "airbnb/hooks",
        "eslint:recommended",
        "prettier",
        "plugin:jsx-a11y/recommended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 8
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "jest": true
    },
    "rules": {
        "react/react-in-jsx-scope": 0,
        "react-hooks/rules-of-hooks": "error",
        "no-console": 0,
        "react/state-in-constructor": 0,
        "indent": 0,
        "linebreak-style": 0,
        "react/prop-types": 0,
        "jsx-a11y/click-events-have-key-events": 0,
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".js", ".jsx"]
            }
        ],
        "prettier/prettier": [
            "error",
            {
                "trailingComma": "es5",
                "singleQuote": true,
                "printWidth": 100,
                "tabWidth": 4,
                "semi": true,
                "endOfLine": "auto"
            }
        ]
    },
    "plugins": ["prettier", "react", "react-hooks"]
}

for ignore eslint checking

eslint আর node_modules এর ভিতরের eslint এর version এ error হইতে পারে। এর জন্য simpley just terminal এর prosedure টা follow করলেই চলবে । such as , প্রথমে যে directory তে yarn.lock বা .eslintrc file আছে ঐ directory তে .env ফাইল তৈরি করে তার ভিতর

SKIP_PREFLIGHT_CHECK=true

দিয়ে দিব , টা হইলে এর error face হবে না।