vuecli3 vscode eslint+prettier+vetur 格式化代码

1,067 阅读1分钟

需求

避免在开发过程中,因不同人员的代码习惯不同,导致因空格/换行等引起不必要的代码冲突。

第一步 安装插件

下载vscode 在扩展里面 安装这三个

第二步 配置.eslintrc.js

在项目根目录下新建.eslintrc.js 文件,用来配置eslint的规则(哪些不想检测就找对应的rule去禁止掉)

第三步 配置.eslintignore

在项目根目录下新建.eslintignore 文件,用来配置一些不需要eslint去检测的代码,比如引入的插件之类

第四步 配置.prettierrc

在项目根目录下新建.prettierrc 文件,用来配置代码的格式化规则(确保代码的格式化插件选择的是prettier)

第五步 配置.package.json (vuecli3创建项目勾选了自带配置)

执行 npm run build 可全局格式化项目代码,部分可能需要手动去修改

综上

按上述步骤完成后,编辑文件时ctrl+alt+f 和 crtrl+s 的时候都会按照配置的规则去格式化代码及lint验证。