Vue3 代码语法检测和风格检测 ESLint & Prettier

352 阅读2分钟

Vue3 代码语法检测和风格检测 ESLint & Prettier

ESLint是一个静态代码分析工具,用于检查代码中的语法和风格错误
Prettier是一个代码格式化工具,用于自动格式化代码。
两者都可以通过创建配置的js文件或者json文件,配置自定义的规则
ESLint和Prettier两者代码风格可能冲突,因此风格以Prettier为主
项目中如果配置了相应的规则文件,编辑器插件就会以配置的规则文件为主,默认的规则为辅
但是一般我们建议ESLint来处理语法,比如var不能使用,箭头函数无参不加括号等
Prettier用来处理风格,比如换行 使用单引号 结尾不要分号等

ESLint 使用入门

安装eslint 这里使用的是项目自带的安装方式,也可以自己单独安装

image.png .eslintrc.cjs 安装成功后会多出一个.eslintrc.cjs文件,里面就是相关的配置 会自带一些规则, rules配置自定义规则

下面是定义了一个var且没被使用的例子 image.png

image.png 自定义一个规则 禁止使用 var 关键字。 在终端输入

npx eslint .

会输出相应的警告和报错

配合编辑器插件使用

在VScode编辑器中可以配合插件ESLint,会直接在代码处显示相应的报错和警告

image.png tips: 可以开启编辑器的保存自动格式化

Prettier入门使用

一样的可以在创建项目的时候就选择安装 image.png 然后在编辑器中安装插件Prettier

image.png
通过编辑器的保存自动格式化就可以对代码进行格式化
可以在.prettierrc.js文件中配置相应的自定义规则

ESLint与Prettier风格冲突的时候,在ESLint中设置插件Prettier为主即可