# 微信开发者工具

  安装好 ESLint、Prettier、One Dark Pro、GitLens 几个插件即可,注意要对它们进行配置(配置参考)。

# 一、集成 git 终端

  由于在 vscode 中大多时候,个人习惯于使用 git 命令来进行版本管理,微信开发者工具自带的 git 管理方式显然是不适合我的。

目前是一个问题,微信开发者工具就好像是 vscode 的套壳,而且在终端的设计方面并不是很好。

# 二、ESLint 配置

  新建小程序项目后,发现项目中自动添加了.eslintrc.js文件。其实我们可以自己添加。

# 1、配置一

① 安装 ESLint

npm i eslint -D

② 生成配置文件.eslintrc.js

npx eslint --init

结果:

  • 生成了.eslintrc.js 文件(我们可以在里面定义规则)
  • 安装了 eslint 其他相关的 npm 包

# 2、配置二

  新的 eslint 版本使用了新的安装命令,一次完成 ESLint 的安装和配置:

npm init @eslint/config

# 3、补充 ✨

  我们自己创建的.eslint.js 文件和微信小程序开发工具创建项目时自动创建的,不同之处是:其中补充了小程序特有的全局变量和方法(可以根据需要补充进去)

module.exports = {
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    requirePlugin: true,
    requireMiniProgram: true
  }
}

# 二、代码自动格式化

  当然自动格式化,会减少我们不少麻烦。

博文推荐 (opens new window)

# 1、ESLint 插件:

用于代码检测

① 使用原始的 npm 包

# 代码检测
eslint <file_name>
# 或者
# 先:
{
  "script":{
    "lint": "eslint ."
  }
}
# 然后
npm run lint

# 代码修复
eslint . --fix

② 使用 vscode 插件

  目前 vscode 的 ESLint 插件已经支持自动格式化代码了:

配置:

//setting.json文件
{
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"]
}

使用:

  当我们的代码不符合 eslint 语法时,会报错;Ctrl + S 保存时,会对代码进行自动修复

关于代码 🎉 风格:可以在项目中的.eslintrc.js 文件中配置

# 2、Prettier 插件:

用于代码格式化

  由于 ESLint 插件只对代码进行代码修复,不会对代码格式进行美化(并且只能处理 js 文件),所以 Prettier 插件就得以使用。

① 使用原始的 npm 包

安装:

npm i prettier -D

配置:

  • .prettierrc.js
module.exports = {
  // tab代表几个空格数
  tabWidth: 2,
  // 每行文字个数超出此限制将会被迫换行
  printWidth: 100,
  //禁止默认末尾自动添加逗号
  trailingComma: 'none',
  //禁止默认行末自动添加分号
  semi: false,
  //对内容使用单引号
  singleQuote: true,
  //对象属性添加空格
  bracketSpacing: true
}

使用:

# 代码格式化
npx prettier --write .

② 使用 vscode 插件

当然若项目中有.prettierrc.js,则会优先使用项目中的 eslint 规则

局部方式

  • .vscode/settings.json
{
  "prettier.arrowParens": "avoid",
  "prettier.printWidth": 100,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none"
}

全局方式

{
  "prettier.configPath": "C:\\Users\\Lencamo\\.prettierrc"
}
  • .prettierrc
{
  // tab代表几个空格数
  "tabWidth": 2,
  // 每行文字个数超出此限制将会被迫换行
  "printWidth": 100,
  //禁止默认末尾自动添加逗号
  "trailingComma": "none",
  //禁止默认行末自动添加分号
  "semi": false,
  //对内容使用单引号
  "singleQuote": true,
  //对象属性添加空格
  "bracketSpacing": true
}

# 3、ESlint 和 Prettier 冲突 ✨

解决方案:

① 代码自动格式化由 Prettier 处理

关闭一些不必要的或者是与 prettier 冲突的 lint 选项

npm i eslint-config-prettier -D

配置:

  • .eslint.js
module.exports = {
  extends: ['prettier'] // 覆盖eslint格式配置,写在最后
}

② 使用 ESLint 规则实现代码修复

发生冲突时,会被 prettier 进行标记。

npm i eslint-plugin-prettier -D

配置:

  • .eslint.js
module.exports = {
  plugins: ['prettier'], // 覆盖eslint格式配置,写在最后
  rules: {
    'prettier/prettier': 'error' // prettier 检测到的标红展示
  }
}

③ 综合写法

module.exports = {
  // "plugin:prettier/recommended" 是两种配置的综合🍗写法
  extends: ['standard', 'plugin:prettier/recommended']
}

# 三、总结 🎈

# 1、项目中

安装:

# 1、ESLint
npm init @eslint/config -D # 新版本安装目录:👍一键部署配置

npm i eslint-config-prettier -D
npm i eslint-plugin-prettier -D
# npm i eslint-plugin-standard -D

# 2、Prettier
npm i prettier -D

配置:

  • .eslint.js
module.exports = {
  // "plugin:prettier/recommended" 是两种配置的综合🚩写法
  extends: ['standard', 'plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'error',

    // 默认的规则
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

    // 自定义的规则
    'space-before-function-paren': ['warn', 'never'],
    'vue/multi-word-component-names': 'off' // 关闭名称校验
  }
}
  • .prettierrc.js
module.exports = {
  // tab代表几个空格数
  tabWidth: 2,
  // 每行文字个数超出此限制将会被迫换行
  printWidth: 100,
  //禁止默认末尾自动添加逗号
  trailingComma: 'none',
  //禁止默认行末自动添加分号
  semi: false,
  //对内容使用单引号
  singleQuote: true,
  //对象属性添加空格
  bracketSpacing: true
}

使用:

# 代码检测
eslint .

# 代码格式化
npx prettier --write .

# 2、vscode 中

格式化

  • setting.json
{
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",

  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

① ESLint 插件配置

  • setting.json
{
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"]
}

② Prettier 插件配置

  • setting.json
{
  "prettier.configPath": "C:\\Users\\Lencamo\\.prettierrc"
}
  • ~ / .prettierrc
{
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": true
}
更新于 : 7/8/2024, 10:21:14 AM