Build a scaffold of webpack4+react+typescript+eslint from scratch

This article mainly introduces the relevant content of code specification.

eslint

We usually use lint tools to check for code irregularities. Here's an example of combining eslint, typescript, and webpack.

First install dependencies:

$ npm i -D eslint babel-eslint eslint-loader eslint-plugin-jsx-control-statements
$ npm i -D eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin 

Then create a new eslint configuration file. eslintrc.js in the root directory:

module.exports = {
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    // "jquery": true
    "jest": true,
    "jsx-control-statements/jsx-control-statements": true // if you can use it in jsx, you need to use it in conjunction with other babel plug-ins
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": 'module',
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "globals": {
    // "wx": "readonly",
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-control-statements/recommended", // Need to cooperate with babel plug-in
  ],
  "settings": {
    "react": {
      "version": "detect" // Read the installed react version automatically
    }
  },
  "plugins": ["@typescript-eslint", "react", "jsx-control-statements"],
  "rules": {
    "no-extra-semi": 0, // Prohibit unnecessary semicolons
    "quotes": ['error', 'single'], // Mandatory use of single quotation marks
    "no-unused-vars": 0 // Undefined variables are not allowed
    // ... your own configuration
  }
};

We may want to check or not check some specific files. We can create a new. eslintignore in the root directory. The following configuration does not check js files other than the src directory:

**/*.js
!src/**/*.js

You also need to configure webpack to enable eslint at development time:

// webpack.base.js
module: {
  rules: [
    // Place this configuration before all loader s
    {
      enforce: 'pre',
      test: /\.tsx?$/,
      exclude: /node_modules/,
      include: [APP_PATH],
      loader: 'eslint-loader',
      options: {
        emitWarning: true, // This configuration needs to be turned on to output warning information in the console
        emitError: true, // This configuration needs to be turned on to output error information in the console
        fix: true // Whether to repair automatically, and if so, repair the repairable parts automatically every time you save them
      }
    }
  ]
}

prettier

In addition to constraining the coding specifications for development, we generally want to format the code automatically when we submit it it, but we only want to deal with the currently submitted code, not the entire code base, otherwise the submission records will be messy. prettier and lint-staged This task can be accomplished.

First install tools:

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier
$ npm i -D lint-staged

Adding prettier configuration. prettierrc.js to the root directory can also add the neglect configuration. prettierignore (the recommended configuration is consistent with the lint neglect rule):

// This configuration needs to be consistent with eslint, otherwise conflicts can occur when eslint auto fix is enabled
module.exports = {
  "printWidth": 120, //The number of characters in a line, if exceeded, will be changed by default to 80
  "tabWidth": 2,
  "useTabs": false, // Note: makefile files must use tab, which is ignored as the case may be.
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none", //There are three optional values for the use of tail commas: "<none | Es5 | all>"
  "bracketSpacing": true, //Object braces have spaces directly, default to true, effect: {foo: bar}
};

Modify the eslint configuration.eslintrc.js:

module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-control-statements/recommended", // Need to cooperate with babel plug-in
    "prettier" // Order of attention
  ],
  "plugins": ["@typescript-eslint", "react", "jsx-control-statements", "prettier"], // Order of attention
  "rules": {
    "prettier/prettier": 2, // This way prettier prompts can be output in the console in the wrong form
  }
};

Then we configure lint-stage to automatically format the code when submitting it.

Modify package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{jsx,js,tsx,ts}": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ]
}

Unifying Editor Specification with Edorconfig

Some editors can automatically format code according to configuration prompts, and we can provide a unified configuration for various editors.

Create a new. editorconfig in the root directory. Be careful not to conflict with existing lint rules:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Using jest

Using jest can help us test the code. There are many ways to implement jest in the project. The text is not discussed in detail, but only provides some necessary tools and configurations.

Necessary tools:

$ npm i -D jest babel-jest ts-jest @types/jest

Refer to the configuration jest.config.js, and the test files are placed in the _test_ directory:

module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

Tags: Javascript React TypeScript npm Webpack

Posted on Wed, 11 Sep 2019 20:30:29 -0700 by rocco2004