Series of articles:

  • Step one, create the first command
  • Step 2: Set up the development environment
  • Step 3: Get information about github projects
  • The fourth step is to obtain project information through lifting code
  • [Hand in hand to take you to lift a scaffolding] step five, finish the job

To do a good job, he must sharpen his tools. A good development environment can get you more bang for your buck. Come together, sharpen the knife and dry it

Please note, babies, that due to the async function being used in the project, Node requires v7.6.0+

Configure ESLint to enable vscode automatic repair

Configuration eslint

  • First, installeslint
npm i eslint -D
Copy the code

  • Second, to initialize ESLint, execute./node_modules/.bin/eslint –init in the root directory of the project

  • At the command line prompt, select the first Use a Popular Style Guide and press Enter

  • For the next tip, still choose the first Airbnb, relatively strictly

  • Do you use React? Write n and enter.

  • Select the default configuration file format

  • After formatting the configuration file, ESLint will automatically detect dependencies

  • Next step, etc.

  • Next, the editor installs the ESLint plug-in

  • After the installation is complete, restart the editor. After removing the seal at the end of the sample line of code, we find that the editor is marked red, indicating that ESLint is working properly. Configuration is successful, is not the heartbeat bouncing di ~

Enable vscode automatic repair

We’ve been able to get the editor to identify irregularities in our code through the previous configuration, but it’s not enough. Since the editor can identify errors, it would be great if it could also correct them

  • The first step is to open the VScode configuration file Command +,

  • Second, type autofix in the function search box

  • Step 3: Configure as shown in the following figure.

At this point, our editor can automatically fix some of the code specification related errors found in ESLint, as shown below.

After deleting the seal, save editor automatically add the seal to us, development experience 666, cool to fly ^_^

Vue React can be fixed automatically. If you are interested, please contact us in the comments section

Compatible es6

The capital of PS:The following configuration works fine for normal Node projects, but it sometimes works and sometimes doesn’t work for scaffolding projects, for reasons I don’t know yet. I hope the old driver will not hesitate to give advice, comment section, I wait for you

My current solution is to manually change the es6 module import rules to commonJS (I really don’t like Babel transcoding and then change the directory), and the current code address running online isgithub

For modern front-end developers, ES6 has become a must-have, but Node is not fully compatible with ES6 (yet) in order to use the latest syntax for all purposes. Let’s bring in Babel

First, install dependencies

NPM I @babel/[email protected] babel-core@^6.26.3 [email protected] [email protected] [email protected] [email protected] [email protected] -sCopy the code

Paste the following in the file by adding.babelrc to the root directory of the project

{
    "presets": ["env"]."plugins": ["transform-es2015-modules-commonjs"]}Copy the code

Create the entry file index.js and paste the following

require('babel-register');
const babel = require('@babel/core');
const babelPresetLatestNode = require('babel-preset-latest-node');

babel.transform('code(); ', {
  presets: [[babelPresetLatestNode, {
    target: 'current',}]],});require('babel-polyfill');
require('./src');
Copy the code

Create a SRC directory and add the index.js a.js file with the following contents

// index.js
import a from './a';
a.a();

// a.js
export default {
  a() {
    console.log('12345'); }};Copy the code

At this point, run node index.js to print 12345

Bin /learn.js was modified as follows:

#! /usr/bin/env node
require('.. / '); // Execute the entry file
Copy the code

At this point, learn is executed on the command line

So far, our development environment is complete. Scatter flowers to celebrate ^_^

Next episode: In the next episode, we will connect to the GayHub public API to obtain project information. If you are interested, you can preview in advance and have fun at 😄