拖沓沓
前端小学生
获得徽章 5
- 之前b站上看到这个数据可视化的图以为是up主自己实现的，觉得很好看很牛逼，然后今天逛着逛着发现了出处，2333，Brushable Radial Chart
bl.ocks.org 。最后放两张『贵人·鸟』照片，今天也是数据可视化/前端/乃木坂46的一天。逃 68 - 嗨哦~今天推荐的是一个机器学习项目——pose-animator。他是一个基于 PoseNet 和 FaceMesh 的，可将你的 Pose 变成 2D 动画的工具。生成的动画人物会根据你的表情和肢体动作做出相应的丰富动作，快来试试制作你专属的 2D 镜像人物表情包吧~hellogithub.com 130
- vscode如何优雅的拥抱stylelint
vue-admin-beautiful开源项目中用到了stylelint，通过写开源项目第一次了解到原来css的属性是有顺序的。stylelint自动化修复配置1.首先你需要在vscode商店下载stylelint-plus这个工具2.然后在设置setting.json进行如下配置{"[vue]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"editor.quickSuggestions": {"strings":true},"workbench.colorTheme":"One Monokai","editor.tabSize":2,"editor.detectIndentation":false,"emmet.triggerExpansionOnTab":true,"editor.formatOnSave":true,"javascript.format.enable":true,"stylelint.enable":true,"css.validate":false,"less.validate":false,"scss.validate":false,"stylelint.autoFixOnSave":true,"git.enableSmartCommit":true,"git.autofetch":true,"git.confirmSync":false,"[json]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"liveServer.settings.donotShowInfoMsg":true,"explorer.confirmDelete":false,"javascript.updateImportsOnFileMove.enabled":"always","typescript.updateImportsOnFileMove.enabled":"always","files.exclude": {"**/.idea":true},"editor.codeActionsOnSave": {"source.fixAll.eslint":true},"[javascript]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},}复制代码3.项目根目录新建.stylelintrc.jsmodule.exports = {extends: ["stylelint-config-standard","stylelint-config-recess-order"],rules: {"at-rule-no-unknown": [true, {ignoreAtRules: ["mixin","extend","content","include","for","function","return", ], }, ],"selector-pseudo-element-no-unknown": [true, {ignorePseudoElements: ["v-deep"], }, ],"selector-pseudo-class-no-unknown": [true, {ignorePseudoClasses: ["export"], }, ],indentation:2,"no-descending-specificity":null,"declaration-colon-newline-after":null, },ignoreFiles: ["**/*.js"],};
具体查看文章juejin.im 展开评论6 - 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
bl.ocks.org