books.halfrost.com
小苒51
前端
获得徽章 0
- vscode如何优雅的拥抱eslint
vue-admin-beautiful项目前期借鉴了唐金州的mock自动导出，花裤衩的tagsview和permission，甚至后期项目的不少灵感也都来源于贤心和花裤衩的项目，页面的风格也跟ant design风格很类似，但我不甘心只做一个抄袭者，于是恶补了好多从前没有接触过的知识，这是我的第一篇文章，希望能帮助到大家
eslint自动化修复配置
eslint的强大不用多说了吧，但有时候规范太过严格，会影响开发的心情，这个时候我们就需要用到prettier这个工具啦，他能自动帮我们规范语法，自动帮我们格式化代码，自动修改属性的顺序，这不是一个简单的代码格式化工具。
1.首先你需要在vscode商店下载Prettier - Code formatter这个工具
2.然后在你的项目package.json的devDependencies下安装这些开发依赖
{
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.0.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.0.5",
}
3.项目根目录新建prettier.config.js，注意一般开源的项目的换行符一般是lf，可自行百度搜索crlf与lf的区别，这里可以配置单引号还是双引号，行末要不要加分号，参数要不要加括号等等，个人比较喜欢行末加分号，js用双引号，当然你可以根据自己的喜好，自定义配置，百度搜索prettier官网即可
module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: false,
quoteProps: "as-needed",
jsxSingleQuote: false,
trailingComma: "es5",
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: "always",
vueIndentScriptAndStyle: false,
endOfLine: "lf",
};
4.最后把eslint的配置开到最严格（变态模式）
结语（广告时间）
vue-admin-beautiful已经默认开启了最严格的eslint规范，并实现了自动化修复
集成版演示地址：
mpfhrd48.sanxing.uz7.cn/vue-admin-beautiful
layui风格集成版演示地址：chu1204505056.gitee.io
横向布局集成版演示地址：chu1204505056.gitee.io
iview风格集成版演示地址：chu1204505056.gitee.io 展开842 - 各大站通用首页变灰代码：
依次排序：百度、淘宝（京东）、网易云音乐、360首页、腾讯网、掘金、CSDN、中国中央政府网、国务院新闻办公室。26189 - 【沸点福利】09期：阿里巴巴云原生团队来给掘友们送福利啦！
大家好！先做个自我介绍，我们是阿里巴巴云原生团队，由阿里巴巴云原生出品的架构师系列已上线，欢迎围观（juejin.im）。关注微服务、Serverless、容器、Service Mesh，聚焦云原生流行技术趋势、云原生大规模的落地实践，做最懂云原生开发者的技术圈
️
感谢盆友们对阿里巴巴云原生的支持！话不多说，现在是福利时间～
奖品信息：
💡无线充电护眼灯 x 10
🎵桌面蓝牙音箱 x 20
参与方式📖：关注「阿里巴巴云原生」掘金账号+在此条沸点下评论你最想学习的云原生内容
抽奖规则
：我们将在此条沸点评论中，抽取符合参与规则的掘友～（记得评论+关注喔）
截止时间⏰️：2020-4-10 17:00:00 周五
领奖方式📢：我们会在截止时间后一个工作日内在掘金沸点公布获奖名单，请获奖者在三个工作日内添加「云原生小助手」微信：alibabass88，回复「沸点活动获奖」以及完整收件人信息
联系方式
：添加微信「云原生小助手」：alibabass88 私信哦 展开98847
恭喜3+1项目第12次登上github热门榜，这回与react同框
开心，捣鼓了几天，终于把业余玩的uniapp持续集成搞定了，提交代码自动构建App
demo地址：