2020最新编辑器集成eslint、prettier、stylelint,git提交预检查代码配置
时间:2022-07-25
本文章向大家介绍2020最新编辑器集成eslint、prettier、stylelint,git提交预检查代码配置,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
webstorm
编辑器自动格式化配置:
plugin
webstorm设置搜eslintr、eslint、stylelint,如果没有,搜plugin,安装prettier、eslint、stylelint
File watchs
设置里搜File watchs,增加prettier,打钩开启自动格式化,则会在保存时自动格式化。
VS code
- 安装 "ESLint" 以及 "Prettier - Code formatter" 插件,打开 VSCode 点击「扩展」按钮,搜索 ESLint、prettier,然后安装即可
- 点击左下角的"齿轮图标",点击Setting后上端选择Workspace选项卡,(也可以在项目根目录下创建一个配置文件
.vscode/settings.json
),添加以下配置:
{
// VSCode 中的 ESLint 插件默认是不会检查 `.vue`、`.ts` 或 `.tsx` 后缀的
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
],
// 开启保存时自动修复
"editor.codeActionsOnSave": {
// eslint开启
"source.fixAll.eslint": true,
// stylelint开启
"source.fixAll.stylelint": true
},
// prettier:保存时自动格式化所有支持文件:javascript/javascriptreact/typescript/typescriptreact/json/graphql
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 或者仅指定js文件保存自动格式化
// Set the default
//"editor.formatOnSave": false,
// Enable per-language
//"[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// "editor.formatOnSave": true
// }
// 指定VSCode用于IntelliSense(智能感知)的ts版本,将内置版本更换为工作区版本
"typescript.tsdk": "node_modules/typescript/lib"
}
然后你ctrl+s 你会发现你的文件格式切换了,并且vscode底部出现:
git提交预检查
1、安装 husky和link-staged
在安装之前,要先配置好eslint配置或prettier配置
执行以下命令,会自动配置好husky和lint-staged
npx mrm lint-staged
个人理解:
husky:用来给git对应的时机注册钩子的
lint-staged:用来监听文件是暂存文件的
2、编辑 package.json
文件:
注意几点:
- lint-staged从
v10.0.0
对原始暂存文件的任何新修改都将自动添加到提交中,不需要手动写入git add 命令,目前网上看到的大部分教程都是带有git add 命令的,如果加了之后,lint-staged会报一个警告,也可能发生意想不到的错误。 - lint-staged从
v10.0.0
起,使用git stash来提高速度并在运行时提供备份,运行时必须有一个提交 - lint-staged从
v10.0.0
开始,需要Node.js 10.13.0或更高版本 - lint-staged从
v10.0.0
起,如果linter任务撤消了所有分阶段的更改,则lint-staged将中止提交。要允许创建空提交,请使用该--allow-empty
选项 - lint-staged匹配的文件中,可以执行scripts的命令,也可以直接执行eslint修复命令等。
- lint-staged匹配的文件中,如果有多个命令可以写为数组
- lint-staged支持三种配置方式
package.json
.lintstagedrc
lint-staged.config.js
使用--config
或-c
标志指定配置文件
- lint-staged匹配的文件是glob模式,如果不带斜杠,会自动把项目中所有包含指定后缀的进行匹配,如果包含斜杠,则会在对应目录下,匹配所有合适的文件
"scripts": {
"eslint:fix": "npx eslint --fix --ext ".js,.jsx,.ts,.vue,.html,.md"",
"eslint:lint": "npx eslint --ext ".js,.jsx,.ts,.vue,.html,.md"",
"stylelint:fix": "npx stylelint "**/*.css,.less,.scss" --fix"
},
"husky": {
"hooks": {
"pre-commit": "npx lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,vue,html,md}": "npm run eslint:fix",
"*.{css,less,scss}": "npm run stylelint:fix"
}
3、切记,先 git add
,提交到暂存, git commit
提交,就会执行lint-staged下配置的校验命令,这里注意:针对提交到暂存的修改的文件代码校验,未修改的文件不会校验,代码没有问题才会被真正提交,如果报出代码错误,需要先修复所有代码错误,才会自动格式化,否则不会先自动格式化。
4、在紧急的情况下,来不及修改代码格式,可以使用 git commit --no-verify
跳过代码校验。
- 《天弋夺宝》—01飞船的控制
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(63)-Excel导入和导出
- 核心代码(未注释)
- 从科研角度谈“如何实现基于机器学习的智能运维”
- 用后台代码创建Storyboard
- 十分钟掌握微信小程序开发:高仿电商产品分类功能
- WCF技术剖析之五:利用ASP.NET兼容模式创建支持会话(Session)的WCF服务
- DoubleAnimation方法
- 已经重写,源码和文章请跳转http://www.cnblogs.com/ymnets/p/5621706.html
- 有趣 不用js也能创建silverlight
- Hadoop和Spark的异同
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(62)-EF链接串加密
- sl 2.0 重要更新
- 云计算技术原理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Manage Jenkins报错:"依赖错误: 部分插件由于缺少依赖无法加载...",解决办法
- 从头创建您自己的vuei .js——第3部分(构建VDOM)
- adb 模拟上下左右滑动,示例演示
- python 技术篇-pythoncom.PumpMessag()关闭、杀死它的进程,pythoncom.PumpMessag()运行卡住解决办法
- PyQt5 技术篇-QWidget、QDialog程序窗口关闭closeEvent()触发事件方法重写
- 恕我直言你可能真的不会java第6篇:Stream性能差?不要人云亦云
- python-技术篇-打印详细报错日志,获取报错信息位置行数
- React从入门到放弃,一个关于网页速度的故事
- python 技术篇-日志定期清理设置,自动清理上个月的日志实例演示
- python 技术篇-日志模块自定义时间格式
- 恕我直言你可能真的不会java第12篇-如何使用Stream API对Map元素排序
- JavaScript错误处理完全指南
- 从头创建您自己的vue.js——第4部分(构建反应性)
- Oracle 数据库-服务器端字符集查看方法
- Pywinauto 应用后端类型选择错误:AttributeError: 'NoneType' object has no attribute 'backend'. 原因及解决办法