ESlint代码规范
2023-12-17 13:43:18
1,按照指引;
1.1?安装依赖
npm?install?typescript?eslint?@typescript-eslint/parser?@typescript-eslint/eslint-plugin?-D
1.2?创建ESLint配置文件
touch?.eslintrc
//?写入配置
{
"root":?true,
"parser": "@typescript-eslint/parser",
"plugins":?[
"@typescript-eslint"
??],
"extends":?[
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
??]
}
1.3?创建ESLint忽略文件配置
touch?.eslintignore
//??写入
node_modules
dist
1.4??在package.json中添加lint命令
{???"scripts":?{??"lint":?"eslint?.?--ext?.ts",???}}
2,ESlint规则详解;
"off"可以替换成0,代表关闭该规则
"warn"可以替换成1,代表打开规则,提示警告,但不会报错
"error"可以替换成2,代表打开规则,直接报错
"rules": {??//?新增校验规则
"no-console":?0?,//?如果有console,会抛出错误
"prefer-const":?0?,?//?不需要只能const声明变量
"no-var":?2?,?//?不能使用var声明变量
"no-case-declarations":?0?,?//?代码作用域的问题
"no-useless-escape":?0?,?//?转义字符串,模板文字和正则表达式中的非特殊字符不会产生任何影响
"no-unused-vars":??0?,?//?该规则旨在消除未使用的变量,函数和函数的参数
"@typescript-eslint/ban-types":?[??//?强制不使用类型
??????????"error",
{
"extendDefaults":?true,
????????????"types": {
"{}":?false,
"Function":?false
}
}
????????],
"prefer-rest-params":?0?,?//?该规则旨在标记arguments变量的使用
"no-prototype-builtins":?0,?//?这个规则不允许直接在Object.prototype对象实例上调用某些方法
"@typescript-eslint/no-explicit-any":?0??//?新增这句话,关闭any报错
}
3,ESLint自动修复
从上面的错误可以看到,它告诉我们共有7个问题,有5个问题可以通过–fix自动修复。
??7?problems?(7?errors,?0?warnings)
5?errors?and?0?warnings?potentially?fixable?with?the?--fix?
{ "scripts": {
"lint": "eslint?.?--ext?.ts",
"lint:fix": "eslint?.?--ext?.ts?--fix" },}
然后运行?npm?run?lint:fix
4,?FAQ;
如果您的团队对代码要求宽松,不想花费时间去每条的去看ESLint规则,可以使用eslint:recommended,ESLint推荐的配置。
如果团队对代码要求严格,也不想花费时间去每条的去看ESLint规则,可以使用大公司开源的ESLint规则,比如Airbnb、Facebook的规则,拿过来进行简单的修改即可。我团队目前在用的就是Airbnb的规则。
如果团队对代码要求严格,并且有时间,可以自己按照ESLint规则一条一条的制定属于自己团队的规则。
在现实项目中,我们一般会使用Husky和ESLint来搭配使用,在团队成员用Git提交代码的时候,进行lint检查,防止错误的代码被提交到版本库。
ESlint规则手册:? http://www.verydoc.net/eslint/00003544.html
你的组件中应该按照以下顺序来声明属性:
"components":声明引入的子组件
"props":声明组件的输入属性
"data":声明组件的数据
"computed":声明计算属性
"watch":声明观察者
"methods":声明组件的方法
生命周期钩子:按照它们被调用的顺序声明,如?"beforeCreate"、"created"、"beforeMount"?等等。
文章来源:https://blog.csdn.net/weixin_49307011/article/details/135015829
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!