ESLint语法规范 | 任先生的笔记库

# 微信开发者工具

安装好 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
}

← 分包管理回顾 →