Breaking News: Grepper is joining You.com. Read the official announcement!

setting up react on visual studio code

Add Answer

TechLover answered on July 8, 2021 Popularity 10/10 Helpfulness 1/10

answer setting up react on visual studio code

related Vs Code Setup for Reactjs Project

setting up react on visual studio code

Comments(1)

-1

cd my-app
npm start

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: code.visualstudio.com

Tags: javascript setting visual-studio

Link to this answer
Share Copy Link

Contributed on Jul 08 2021

TechLover

0 Answers Avg Quality 2/10

Closely Related Answers

Vs Code Setup for Reactjs Project

Comment

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"]
}


    e 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.

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 29 2022

YellowSnowman85

0 Answers Avg Quality 2/10

setting up react on visual studio code

Contents

More Related Answers

setting up react on visual studio code

Closely Related Answers

Vs Code Setup for Reactjs Project

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.