飞跃高山与大洋的鱼飞跃高山与大洋的鱼
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
  • VSCODE

    • 编辑器 VSCode
    • 处理 VSCode 错误
    • 修复 TODO HIGHLIGHT 的链接
    • ESLint 格式化
      • ESLint 依赖
      • 启用插件
      • 配置文件说明
        • 解析参数 parserOptions
        • 环境 env
        • 扩展 extends
        • 插件 plugins
        • 规则 rules
      • 插件 Prettier
        • Prettier 依赖及配置
        • 搭配 ESLint 一起使用
    • VSCode 识别 alias
    • 为 VSCode 设置字体
    • 同步 VSCode 配置
    • VSCode 分享代码片段
    • Vetur 插件
    • Copilot tab 补全在 markdown 中不生效

ESLint 格式化

格式化插件 ESLint。

ESLint 依赖

安装依赖:

# 初始化
npm init -y

# 安装 eslint
npm i eslint -D
# 如果需要支持 ts
npm i typescript -D

初始化 eslint:

# https://docs.npmjs.com/cli/v7/commands/npx
npx eslint --init

检测和格式化文件:

npx eslint yourfile.js
npx eslint yourfile.js --fix

也可以配置 package.json script:

"scripts": {
  "lint": "eslint --ext .js ./ --fix",
}

至于在 git hooks 处添加 lint,此处就不展开了。

启用插件

以上都是命令行完成的。当希望在编辑器 VSCode 中获得更好的展示则需要安装一些插件:

  1. Vetur 更好的支持 Vue 文件(与格式化无关);
  2. ESLint 支持自动格式化。

配置 ESLint 后在编辑器中保存(Ctrl + S)即会自动格式化。

// eslint + format
"eslint.options": {
  "extensions": [
    ".js",
    ".jsx",
    ".ts",
    ".tsx",
    ".html",
    ".vue"
  ]
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "html",
  "vue"
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
}

配置文件说明

配置文件名为 .eslintrc。

解析参数 parserOptions

默认解析器(parser) 为 espree,可以指定为 babel 或 typescript 的:

module.exports = {
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  }
}

环境 env

不同的环境可以提供不同的环境全局变量。例如 browser 环境下可以使用 window 全局变量;node 环境下可以使用 node 一系列变量;jest 环境下可以使用 describe、test 等;es(/d+) 则对应了 EcmaScript 的种种特性。

除此之外,很多时候引入并不知名的第三方包呢?则可使用 globals:

module.exports = {
  globals: {
    someLib: true
  }
}

注意:

  • false、"readable"、"readonly" 等价
  • true、"writeable"、"writable" 等价

扩展 extends

类似于 babel 的 presets 概念一致,是一整套规范。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'standard'
  ]
}

说明:

  • eslint 为官方扩展
  • plugin 为插件类型扩展,vue 可以手动调整为 vue3,具体看 eslint-plugin-vue
  • eslint-config 常常来自一些团队的约束,如 eslint-config-airbnb、eslint-config-standard、eslint-config-google

插件 plugins

ESLint 默认可以检测 JavaScript,而如果想检测更多,例如 Vue、TypeScript 则需要另行添加解析了:

module.exports = {
 plugins: [
    'vue',
    '@typescript-eslint'
  ]
}

规则 rules

当 extends 中部分规则不合你口味时可在此一一修改。

插件 Prettier

在之前介绍了 plugins 可以支持更多的文件格式,那 prettier 则是专业的。

Prettier 依赖及配置

# 安装 prettier
yarn add prettier --exact -D
# 配置
echo module.exports = {} > .prettierrc.js
touch .prettierignore

在 .prettierrc.js 中可对配置稍作修改。

搭配 ESLint 一起使用

首先准备插件:

yarn add eslint-plugin-prettier -D

配置:

module.exports = {
 plugins: [
    'standard',
    'plugin:vue/essential',
    'plugin:prettier/recommended' // 放在最后可以覆盖之前规则
  ]
}
编辑文档!
上次更新:
贡献者: shanyuhai123
Prev
修复 TODO HIGHLIGHT 的链接
Next
VSCode 识别 alias