Create a modern RN development environment using vscode

This article documents how to use vscode to create a modern RN development environment with the goal of improving development efficiency and quality.

The problem

  1. Code without prompts: Many non-front-end students new to RN development will ask “Which editor has intelligent prompts?” . And for the front end of the students, now the day has been a lot better, what bicycle.

  2. Low-level code errors: errors here are things like spelling errors, notation errors, etc. After writing the code, I ran up to report various errors. Sometimes I spent a lot of effort to find out, and finally found that it was a Semicolon problem in Chinese.

The solution

Some of the options are:

  1. Working with typescript: Use js versions with static typing support, but I need to learn a new syntax, and my code is written in TS, but many good public libraries are not.
  2. Using Flow: This environment is really difficult due to the network, but also to learn some new syntax.

Our choice: VScode + Typings + ESLint

  • Vscode: the latest addition to the universe’s most powerful IDE family
  • Typings: typescirpt based interface files
  • Eslint: Static code checking, ability to detect low-level syntax errors, standardize code formatting and apply best practices

Tools and plug-ins

Editor: vscode

The required and recommended plug-ins are as follows:

Note:

  1. Click on each plug-in to get a detailed description
  2. Vscode and plug-in update frequency is relatively fast, recommend timely update
  3. Vscode plug-in installation is easy, the bottom button on the left is the extension panel, directly search the name of the plug-in, click install

Code intelligence hints

For third-party packages such as React-native:

Global install typings:

npm install typings -g
Copy the code

Install react and React-Native interfaces.

typings install dt~react --save

typings install dt~react-native --save
Copy the code

After the installation is 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:

Reload the react-native code, or use the reload command to reload the react-native code.

Methods Intelligent tips:

Display method parameters:

Hover display description:

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

For business code developers:

For standard modular js code, vscode can automatically establish the link and prompt, we just need to write a comment.

For toolkit or SDK developers:

Our code is to be published to other students, so we need to provide the corresponding. D. ts interface file when we publish. The default is the index.d.ts file in the package root, otherwise you need to specify the typings entry (similar to main) in the package.json configuration.

How to write interface files: Documentation

Code static inspection

Code statics, with the help of ESLint, consists of the CLI and configuration files (rules).

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

Note: This article will cover eslint-CLI parameters, which are not generally used for development, so check the documentation when writing automatic script commands.

  1. The esLint CLI and related plugins are installed first, and development dependencies are added in the package.json project (which is a popular RN configuration) :
"DevDependencies" : {" eslint ":" ^ 3.3.1 ", "Babel - eslint" : "^ 6.1.2", "eslint - config - an" : "^ 10.0.1 eslint - plugin -", "import" : "^ 1.14.0", "eslint - plugin - JSX - a11y" : "^ 2.1.0", "eslint - plugin - react" : "^ 6.1.2"}Copy the code

Then run NPM Install to install.

  1. The configuration file.eslintrc.jsHere we use THE JS format because you can add comments. Optional JSON format)

One can be generated here using the ESLint Init startup wizard.

We can just use the existing file (which is nice to keep in line with the rest of the team) and create a new.eslintr.js file in the project root directory that looks like this:

module.exports = { parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, extends: "airbnb", plugins: [ "react", "jsx-a11y", "import" ], rules: {// 0 = off, 1 = warn, 2 = error  // 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": {"window": true, "fetch": true, "__DEV__": true, "__APP__": true, "__ANDROID__": true, "__IOS__": true } };Copy the code

The plug-in and detection rules are mainly configured here. Some instructions are as follows:

  1. List of rules
  2. The 0 after the rule indicates close, 1 indicates warning, and 2 indicates error. Some rules can be configured with parameters, see the rule list documentation above
  3. There are some simple errors that vscode can fix automatically (if icon of small light bulb appears, it can fix automatically).

The rules here are basically the best practices of js code writing summarized by practice. When encountering error detection, search the rules directly and read the instructions.

Don’t just shut it down.

After installing vsCode’s esLint plugin:

What’s more:

You can use the pre-commit tool to run ESLint to monitor the code before each commit and disable the commit if it fails.

Debug

Vscode uses the react-native tools plugin to debug code instead of chromDevTools.

Closer to native debugging.

We often use the following ways:

  1. Start package Server on the terminal
  2. Vscode select dbug attach to packager
  3. On the terminal, go to the Debug menu and select Debug JS Remotly

conclusion

If you want to do a good job, you must first sharpen your tools. It’s worth it.

Good development environment delivery provides efficiency while maintaining quality.

Good development experience can make you happy coding.