工欲善其事，必先利其器；不会使用工具的程序员不是好程序员。程序员最基本的工具就是编辑器，像前端工程师的编辑器就很多了：Sublime、HBuilder、Vim、Atom、WebStorm、Vscode，不管使用什么编辑器，那么一些使用技巧都是一致且通用的。使用技巧之前，你可能天天加班才能完成工作；使用技巧之后你一定可以每天准点打卡下班！不信吗？下面咱们以 vscode 为例看一看如何通过配置文件提高我们的工作效率！

通用型配置文件

通用配置包括 .editorconfig 、.prettierrc 、.eslintrc 、.stylelintrc

.editorconfig

首先第一个问题：什么是editorconfig？我们在官网上能够找到解答：

What is EditorConfig?

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

一句话概括一下：EditorConfig就是在不同 IDE 中用来统一编程风格的文件 ，众所周知统一编程风格的工具还有 Eslint、Prettier ，三个臭皮匠顶个诸葛亮，EditorConfig和Eslint、Prettier三者搭配就能够解决代码风格统一以及代码规范上的一些问题。

EditorConfig如何配置，以官网上的配置文件为例来看一看（详细配置见：github.com/editorconfi...

bash 复制代码

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

EditorConfig的基本语法就是：匹配文件+规则，如果省略匹配文件则是全局生效；

EditorConfig中对于空格与引号格式的规定尤为重点，因为这些有可能与我们在 prettier 或者 Eslint 中配置的不同，导致格式化不能正常运行。如果有时候格式化不生效可以首先看一看EditorConfig是否已经指定了某些规则。

.prettierrc

prettierrc是 prettier 的配置文件，需要先安装 prettier 插件。prettier是 js 的格式化工具之一。 点击插件可以看到 prettier 所有配置，然后可以新建一个文件以 json 的方式进行配置：

我们只需要用驼峰将这些配置连接起来就可以了，配置的时候浏览器是自带提示的，不用害怕记不住配置项。

json 复制代码

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

prettier最后一个重点就是：prettier会自动导入EditorConfig的配置！

.eslintrc

第二个通用型配置是 Eslint，前置工作：安装 eslint 插件，然后执行npm install -D eslint或者yarn -D eslint

Eslint的强大之处在于它有丰富的插件，可插拔，也可以自定义，针对不同的前端框架，Eslint 有不同的插件去进行代码调整。例如，vue中使用eslint-plugin-vue插件进行格式化，而react使用eslint-plugin-react以及eslint-plugin-react-hooks

要使Eslint生效还需要一份 Eslint 配置，可以写在 package.json 中，像下面这样：

json 复制代码

"eslintConfig": {
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
    ],
    "parserOptions": {
        "parser": "@babel/eslint-parser"
    },
    "rules": {}
}

也可以写在一个单独的.eslintrc文件中内容和上面类似，只是去掉 eslintConfig 这个属性，配置中主要字段含义如下：

名称	含义
rules	校验规则，会有代码提示，各种规则详细内容可以在官网查询，对应值有三种，error（不符合规则时报错，终止程序运行；warn 仅提示；off 不校验）
plugins	插件，当内置规则不符合自己需求时可以编写一些插件来实现自己的格式校验，如何写一个插件这个下次再讲
parser	解析器
extends	扩展，就是一个预制好的配置，可以直接引入进来

综上，通过 EditorConfig 我们抹平了各个 IDE 之间的配置差异，通过 prettierrc 配置好了格式化规则，然后又通过 Eslint 搞定了 js 代码规范问题，那么问题来了，css 的规范问题该怎么办呢？

.stylelintrc

轮到 StyleLint 出场了：

首先安装 StyleLint 插件
安装stylelint

npm install --save-dev stylelint-config-standard

创建 .stylelintrc.json 配置文件并填写以下内容:

json 复制代码

{
  "extends": "stylelint-config-standard"
}

插件配置支持 scss 文件

为什么需要 StyleLint ？一方面是为了规范代码格式，另外一方面更为关键：默认情况下 Vue 中的 scss 代码可能无法被格式化，这个时候就可以祭出 StyleLint。

vscode独有配置文件

vscode独有配置文件：.vscode/settings.json 、vscode 插件 、jsconfig.json(或者 tsconfig.json)

.vscode/settings.json

通常我们都是在全局去做配置，但是这个时候如果某个项目想要个性化的格式化方案这个时候就办不到了：举个例子，比如说我们一般情况下 js 文件都是用 Eslint 去格式化，于是在全局配置 js 格式化工具使用 Eslint，这个时候有一个项目要求关闭 Eslint，统一用 prettier 格式化，那么这个时候是不是 gg 了。

这个时候就需要配置项目目录下的 vscode 配置了，另外为了不污染全局，我的建议是：一些插件配置以及格式化配置不要在全局配，放在项目目录下配置，这样不同项目就可以轻松使用不同的配置了。

json 复制代码

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit"
    },
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[css]": {
        "editor.defaultFormatter": "stylelint.vscode-stylelint"
    },
    "[scss]": {
        "editor.defaultFormatter": "stylelint.vscode-stylelint"
    },
    "stylelint.validate": ["css", "postcss", "vue"]
}

名称	含义
editor.formatOnSave	保存时是否自动格式化，默认格式化工具为 vscode 自带的，要修改的话看下面
[javascript].editor.defaultFormatter	指定 js 模块的格式化方式，可以选 prettier 和 eslint，这里推荐 eslint
editor.codeActionsOnSave	这个和上面差不多，可以配置为 eslint 和 stylelint

vscode插件

vscode 插件地球人都知道。其他编辑器基本上也都有各自的插件，这里有一点需要提一下：那就是这些插件都可以自由编写，谁都可以写插件。这里我推荐一些常用的插件仅供参考：

名称	含义
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code	中文翻译插件
CodeGeeX: AI Code AutoComplete, Chat, Auto Comment	智谱AI
Database Client	页面操作数据库
Error Lens	报错放大并提示在所有代码后面，不用 hover 上去看
ES7+ React/Redux/React-Native snippets	React代码片段，React 开发必备
ESLint	ESLint插件
Fig	终端智能提示
GitLens --- Git supercharged	查看 git 提交详细信息
JavaScript and TypeScript Nightly	js、ts 提示
Live Server	本地服务，调研新技术时必备
Material Icon Theme	让文件夹图标好看一点
Prettier - Code formatter	格式化工具
Stylelint	style 格式校验
Tailwind CSS IntelliSense	tailwind智能提示
Vetur	vue文件识别与智能提示、格式化等，vue 开发者必备
TONGYI Lingma	通义灵码，阿里大模型
CSS Modules	使用CSS Modules时必备，支持 class 跳转到样式文件中

jsconfig（tsconfig）

jsconfig 有利于提高 vscode 初始化项目解析速度，还能够帮助我们自动以路径别名导入文件，另外还可以在 js 下添加 ts 校验提示（当然这可能没什么用）

这是我最近写的一份配置文件：

js 复制代码

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

名称	含义
target	使用哪个 ES 版本的 js 特性，在 TS 环境下会影响编译结果，并且会影响 lib 库版本的引入（lib 是一套 TS 底层接口，在代码提示的时候非常有用，如果设置的 es5，那么我们在使用数组的时候不会提示 es6 的语法）
module	指定文件模块，例如 COMMONJS、UMD、System、ESNext、ES2015、ES6、ES2020、ES2022 等等
baseUrl	基准路径，vscode 会从这个路径开始初始化
paths	路径别名，设置它之后，很多内容都可以自动导入
lib	底层 lib.d.ts 库

说到自动导入不得不提一提 vue 中的自动导入，我也是研究了很久才发现的：就是安装了 Vetur 插件之后，当我们在模板上输入<之后就会有组件提示，选择要引入的组件 Enter 以下就自动导入了并且还自动在 components 中声明好了，是不是事半功倍？

没有讲到的内容

关于上面一些工具还有那些内容没有涉及到呢？

Eslint 工作原理，Eslint 中 parser 的使用，自定义 Eslint 插件
自定义 StyleLint 插件
jsconfig 中各种 module 的含义及其发展
Eslint 与 Typescript，Eslint 能不能写一些插件实现数据类型的不可更改呢？
编写一个 vscode 插件
eslint是一个代码规范工具，而不是一个格式化工具，它将在最新版本中移除格式化代码，只关注于代码规范，格式化可以结合prettier来做

期待下一次不加班闲的无聊的时候能够继续完善这些内容！

细数提高工作效率的那些配置文件

通用型配置文件

.editorconfig

.prettierrc

.eslintrc

.stylelintrc

vscode独有配置文件

.vscode/settings.json

vscode插件

jsconfig（tsconfig）

没有讲到的内容