Write down some of the introductory questions I encountered

1. How to create TS projects

npx create-react-app app-name --template typescript
Copy the code

2. How to introduce ESLint in react+ TS

yarn add eslint --dev

npx eslint --init
Copy the code

The options are as follows:

? How would you like to use ESLint? ... To check syntax only To check syntax and find problems ❯ To check syntax, find problems, and Enforce code style? Whattypeof modules does your project use? ... ❯ JavaScript modules (import /export) CommonJS (require/exports) None of these ? Which framework does your project use? ... ❯ React vue.js None of these? Does your project use TypeScript? No/Yes stocking? Where does your code run? ... (Press <space> to select, <a> to toggle all, < I > to invert selection) ✔ Browser Node? How would you like to define a styleforyour project? ... ❯ Use a popular style guide Answer questions about your style Inspect your JavaScript file(s)? Which style guidedoyou want to follow? ... ❯ reality: https://github.com/airbnb/javascript Standard: https://github.com/standard/standard Google: https://github.com/google/eslint-config-google ? What formatdo you want your config file to be in? ... (Optional) JavaScript YAML ❯ JSON? Would you like to install them now with npm? Holds No/Yes ✔Copy the code

After downloading NPM, delete package-lock.json and load dependencies using YARN again

Then you think you’ve used airbnb rules and everything’s fine

But you’ll find a lot of weird mistakes, like

2.1 ‘React’ was used before it was defined

The first line of the entry file tells react to be called before it is defined, which is ridiculous.

In fact, this is caused by ts declaration, which is the result of stackOverflow and tsLint documentation.

So we need to add it in rules

"rules": {
    "no-use-before-define": "off"."@typescript-eslint/no-use-before-define": ["error"]}Copy the code

2.2 Unable to resolve path to module ‘./App ‘

Then we have the problem of file import

We need to add a library eslint-import-resolver-typescript

yarn add eslint-import-resolver-typescript --dev
Copy the code

Then add Settings (not rules) to.eslintrc.json

"settings": {
    "import/resolver": {
        "typescript": {}}}Copy the code

If an error persists after changing VScode, restart VScode

2.3 JSX not allowed in files with extension ‘.tsx’

Rules to add

"rules": {
    "react/jsx-filename-extension": [
        2,
        {
            "extensions": [
                ".js".".jsx".".ts".".tsx"]}],}Copy the code

2.4 Missing file extension “tsx” for “./App”

Missing file extension “ts” for “./reportWebVitals”

The project runs and finds the error esLint adding rules

        "import/extensions": [
            "error"."ignorePackages",
            {
                "ts": "never"."tsx": "never"}]Copy the code

Finally, the project is running

To sum up:

Yarn add eslint --dev # 2 NPX esLint --init # 3 Add eslint-import-resolver-typescript yarn add eslint-import-resolver-typescript --dev # 4. Add rules for ESLint, ending as followsCopy the code

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "settings": {
        "import/resolver": {
            "typescript": {}
        }
    },
    "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": [
            "error"
        ],
        "react/jsx-filename-extension": [
            2,
            {
                "extensions": [
                    ".js",
                    ".jsx",
                    ".ts",
                    ".tsx"
                ]
            }
        ],
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "ts": "never",
                "tsx": "never"
            }
        ]
    }
}
Copy the code

3. How to expose the WebPack configuration

Method 1:

New project says very clearly, YARN eject, but once you do that you can’t return to the state that you put away.

As a transfer from vue, we can choose a similar approach to vue.config.js

Scheme 2:

Using the @ craco/craco

yarn add @craco/craco
Copy the code

Create craco.config.js under the root project

module.exports = {};
Copy the code

Package. json script modification

  "scripts": {
    "start": "craco start"."build": "craco build"."test": "craco test"."eject": "craco eject"
  },
Copy the code

4. Set an alias, for example, SRC =@

4.1. Modificationscraco.config.js

const path = require('path')

const pathResolve = pathUrl= > path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
		alias: {
			The '@': pathResolve('src'),
			'@assets': pathResolve('src/assets'),
			'@components': pathResolve('src/components'),}}};Copy the code

4.2. Modify tsconfig (add delete line because invalid)

Modify the tsconfig

{
    "compilerOptions": {"baseUrl": "."."paths": {
            "@ / *": ["src/*"]}}}Copy the code

It seems that using “@/ XXX “in code no longer gives an error.

But once you run with YARN Start, you will find that the paths you added are missing.

Not ridiculous

4.3. The right approach

Add the paths.json file in the root directory

{
    "compilerOptions": {
      "baseUrl": "src"."paths": {
        "@ / *": ["*"]}}}Copy the code

Modify the tsconfig file

{
    "extends": "./paths.json"."compilerOptions":{
        ***
    }
}
Copy the code

4.4. Eslint ignores @ import paths

        "import/no-unresolved": [
            2,
            {
                "ignore": [
                    "^ @ /"
                ] // @ is the path alias}]Copy the code

The end of the

By now, you may have encountered basic setup issues on the project, which should have been resolved