Teach you how to use vscode to build a react-native development environment

question

The code has no prompt:
Many non-front-end students who are new to RN development will ask, "Which editor has smart prompts?" . . As for front-end students, life is much better now, so why would they need a bicycle?

Low-level code error:
Errors here refer to things like spelling errors, symbol errors, etc. After writing the code, various errors are reported when running it. Sometimes I spend a lot of effort to find the problem, and finally I find that it is a problem with the Chinese semicolon.

Solution

The possible options are:

1. Use typescript: Directly use the js version with static type support, but you have to learn another set of syntax, and my code is all written in ts, but many good public libraries are not.
2. Using flow: Due to network reasons, this environment is really difficult to configure, and you also need to learn some new syntax.

Our choice: vscode + typings + eslint

• vscode: the latest product of the most powerful IDE family in the universe
• typings: interface file based on typescirpt
• eslint: static code checking, which can detect low-level syntax errors, standardize code format and apply best practices

Tools and plugins

Editor: vscode.

The required and recommended plugins are as follows:

Note:

• Click on each plug-in to get the corresponding detailed instructions.
• The update frequency of vscode and plug-ins is still relatively fast, it is recommended to update in time
• The plugin installation of vscode is very simple. The button at the bottom left is the extension panel. Just search for the plugin name and click to install it.

Code intelligence tips

For third-party packages, such as react-native:

Install typings globally:

npm install typings -g

Install the API documentation for react and react-native:

typings install dt~react --save

typings install dt~react-native --save

After waiting for the installation to complete (depending on the number of packages and network conditions), there will be a typings directory and typings.json configuration file in the root directory of the project:

After completion, restart the code, or use the reload command. Now the react-native and react-related codes will have prompts and instructions, as shown below:

Method Smart Tips:

Display method parameters:

Hover to display instructions:

Note: For other third-party packages, you can use a similar approach or use the plugins mentioned above.

If you are a business code developer:

For standard modular js code, vscode can automatically establish connections and provide prompts, and we only need to write comments.

If you are a toolkit or SDK developer:

If our code is to be published to other students, we need to provide the corresponding .d.ts interface file when publishing.
The default is the index.d.ts file in the package root directory, otherwise you need to specify the typings item in the package.json configuration (similar to main).

How to write an interface file: Documentation

Code static checking

The code is statically linted with the help of eslint, which consists of CLI and configuration files (rules).

After installing the corresponding plug-in in vscode, you can see the detection results in real time on the editor without running the CLI yourself.

Note: This article will involve the parameters of eslint-cli, which are generally not used in development. Check the documentation when writing automated script commands.

First install eslint cli and related plug-ins, and add development dependencies in the project package.json (this is a popular RN configuration):

"devDependencies": {
    "eslint": "^3.3.1",
    "babel-eslint": "^6.1.2",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2"
}

Then run npm install to install it.

Configuration file .eslintrc.js (here we use the js format because comments can be added. json format is optional)

Here you can use eslint init to start the wizard to generate one.

We can use the ready-made one directly (the advantage is that it is consistent with other projects of the team), create a new .eslintr.js file in the project root directory, the content is as follows

module.exports = {
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  extends: "airbnb",
  plugins: [
    "react",
    "jsx-a11y",
    "import"
  ],
  rules:
    // 0 = off, 1 = warn, 2 = error
    //FB configuration reference:
    // https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc

    "global-require": 0,
    "no-use-before-define": 0, // disallow use of variables before they are defined
    "max-len": 0, // specify the maximum length of a line in your program (off by default)
    "no-console": 0, // disallow use of console (off by default in the node environment)
    "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block

    "no-unused-vars": 0,
    "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default)
    "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
    "consistent-return": 0, // require return statements to either always or never specify values

    // allow async-await
    'generator-star-spacing': 0,

    "no-return-assign": 1, // disallow use of assignment in return statement

    "react/jsx-filename-extension": 0,
    "react/self-closing-comp": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/prop-types": 0, // Avoid injecting properties like redux},

  // Set the global variables that may be used here "globals": {
    "window": true,
    "fetch": true,
    "__DEV__": true,
    "__APP__": true,
    "__ANDROID__": true,
    "__IOS__": true
  }
};

Here we mainly configure the plug-in and detection rules, some instructions:

• Rule List
• The 0 after the rule means off, 1 means display a warning, and 2 means display an error. Some rules can be configured with parameters, see the rule list document above for details
• There are some simple errors that vscode can automatically fix (if a light bulb icon appears, it means it can be automatically fixed)

The rules here are basically the best practices for writing js code summarized from practice. When you encounter a detection error, search for the rules directly and read the instructions.

Don't just shut it down.

After installing the eslint plugin for vscode:

What's more:

You can use the pre-commit tool to run eslint to monitor the code before each submission. If it fails, the submission is prohibited.

Debug

After installing the react-native-tools plug-in in vscode, you can use chromDevTools to debug the code.

A debugging method that is closer to native.

The methods we often use are:

• Open the package server in the terminal
• vscode selection, dbug, attach to packager
• In the terminal, bring up the debug menu and select Debug JS Remotely

Summarize

If you want to do your work well, you must first sharpen your tools. It's worth the effort.

A good development environment provides efficiency while ensuring quality.

A good development experience can make you happy coding.

This is the end of this article about teaching you how to use vscode to build a react-native development environment. For more relevant vscode building react-native content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!