Vue3 代码语法检测和风格检测 ESLint & Prettier
ESLint是一个静态代码分析工具,用于检查代码中的语法和风格错误
Prettier是一个代码格式化工具,用于自动格式化代码。
两者都可以通过创建配置的js文件或者json文件,配置自定义的规则
ESLint和Prettier两者代码风格可能冲突,因此风格以Prettier为主
项目中如果配置了相应的规则文件,编辑器插件就会以配置的规则文件为主,默认的规则为辅
但是一般我们建议ESLint来处理语法,比如var不能使用,箭头函数无参不加括号等
Prettier用来处理风格,比如换行 使用单引号 结尾不要分号等
ESLint 使用入门
安装eslint 这里使用的是项目自带的安装方式,也可以自己单独安装
.eslintrc.cjs
安装成功后会多出一个.eslintrc.cjs文件,里面就是相关的配置
会自带一些规则, rules配置自定义规则
下面是定义了一个var且没被使用的例子
自定义一个规则 禁止使用
var 关键字。
在终端输入
npx eslint .
会输出相应的警告和报错
配合编辑器插件使用
在VScode编辑器中可以配合插件ESLint,会直接在代码处显示相应的报错和警告
tips: 可以开启编辑器的保存自动格式化
Prettier入门使用
一样的可以在创建项目的时候就选择安装
然后在编辑器中安装插件Prettier
通过编辑器的保存自动格式化就可以对代码进行格式化
可以在.prettierrc.js文件中配置相应的自定义规则
ESLint与Prettier风格冲突的时候,在ESLint中设置插件Prettier为主即可