Taro+React project configuration ESLint+Prettier

The upper part is the English version, and the lower part is the Chinese version, with the same content. If there are any wrong, or you have anything hard to understand, especially in the English version(it is modifications based on Google Translate), pls feel free to let me know.many thx.

Overview

Use ESLint + Prettier to make the project code uniform format
Environment: "@tarojs/taro": "3.0.27 ``"react": "^16.10.0"

1. Install ESLint related npm packages

ESLint: Select ESLint when Taro initializes the project, then related packages will be installed automatically Prettier: Need to install manually "esint-config-prettier": "^6.15.0" "esint-plugin-prettier": "^3.4.0" "prettier": "^2.3.2"

package_img

2. Establish configuration files

      //.eslintignore    eslint ignore files
      //.eslintrc.js     eslint rule file
      //.prettierrc      prettierrc rule file

2.1 .eslintignore

vant-weapp/

2.2 .eslintrc.js

module.exports = {
  'extends': [
    'taro/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  "rules": {
    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
    "import/no-commonjs": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".ts",".js", ".jsx", ".tsx"] }],
    "react-hooks/exhaustive-deps": 0
  }
}

2.3 .prettierrc

{
    "trailingComma": "none",   
    "tabWidth": 4,  
    "semi": false,  
    "singleQuote": true,
    "printWidth": 200
}

Configuration Rules Reference Official Website

3. Overall project formatting

Added it in package.json

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx src/"

Then run yarn lint-fix on the console. That is to repair the overall project format.

4. VsCode configuration

VsCode v1.5.7
Goal: To prompt errors for VsCode and automatically format when saving.
4.1 Install ESLint plugin

4.2 Configure automatic saving in VsCode

4.2.1 Project Configuration

Only effective for the current project, other projects will not affect Create a .vscode folder in the project root directory and create a settings.json file Refer to VsCode Configuration Document

vscode_setting

   "eslint.workingDirectories": [
     ".eslintrc.js",
     {
     "mode": "auto"
     }
   ],

4.2.2 Global Configuration

This configuration is effective for all projects, only need to choose one of project configuration and global configuration Open the menu bar Code-Preferences-Settings

open_code

4.2.2 Configure automatic saving

auto_save1

Open the json configuration file

auto_save2

Add automatic save code
"eslint.workingDirectories": [
".eslintrc.js",
{
"mode": "auto"
}
],
4.3 Refresh the window

Press the shortcut key Command+shift+P under Mac or Ctrl+shift+P under Window to click Reload Window

reload_window

The following is the Chinese version, the same content as above

Overview

使用 ESLint + Prettier，使项目代码统一格式
环境: "@tarojs/taro": "3.0.27 "react": "^16.10.0"

1. 安装ESLint 相关npm包

ESLint: Taro初始化项目时选择ESLint，会自动安装相关包 Prettier: 需手动安装 "esint-config-prettier": "^6.15.0" "esint-plugin-prettier": "^3.4.0" "prettier": "^2.3.2"

package_img

2. 建立配置文档

      //.eslintignore    eslint忽略文件
      //.eslintrc.js     eslint规则文件
      //.prettierrc      prettierrc 规则文件

2.1 .eslintignore

vant-weapp/

2.2 .eslintrc.js

module.exports = {
  'extends': [
    'taro/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  "rules": {
    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
    "import/no-commonjs": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".ts",".js", ".jsx", ".tsx"] }],
    "react-hooks/exhaustive-deps": 0
  }
}

2.3 .prettierrc

{
    "trailingComma": "none",   
    "tabWidth": 4,  
    "semi": false,  
    "singleQuote": true,
    "printWidth": 200
}

配置规则参考官网

3. 项目整体格式化

在package.json 增加

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx src/"

然后在控制台运行 yarn lint-fix。即修复整体项目格式。

4. VsCode 配置

VsCode v1.5.7
目标: 为了VsCode提示错误，和保存时自动格式化。
4.1 安装ESLint插件

4.2 在VsCode 配置自动保存

4.2.1 项目配置

只对当前项目生效，其他项目不影响
在项目根目录下建立 .vscode文件夹，创建settings.json文件参考VsCode配置文档

vscode_setting

  "eslint.workingDirectories": [
    ".eslintrc.js",
    {
    "mode": "auto"
    }
  ],

4.2.2 全局配置

此配置对所有项目生效，项目配置和全局配置只需选一个
打开菜单栏 Code-首选项-设置

open_code

4.2.2 配置自动保存

auto_save1

打开json配置文件

auto_save2

增加自动保存代码
"eslint.workingDirectories": [
".eslintrc.js",
{
"mode": "auto"
}
],
4.3 刷新窗口

Mac下按快捷键 Command+shift+P（Window下 Ctrl+shift+P）选择 Reload Window

reload_window

mominger / blog