搭错车的小火柴

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

codeReview流程

https://mp.weixin.qq.com/s/So7PwyISlvinisWGaCboiQ

 

vscode中自动格式化stylus

https://marketplace.visualstudio.com/items?itemName=thisismanta.stylus-supremacy

VSCode 扩展商店中搜索 stylus Supremacy 进行安装,然后在设置 setting.json 配置文件中添加配置:

"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分号
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"editor.formatOnSave": true,

这样就可以在保存css的时候自动格式化为stylus了。

jsonEditor

jsonEditor: https://github.com/josdejong/jsoneditor  简单易用

vue-json-editor:https://github.com/dirkliu/vue-json-editor

codemirror: https://codemirror.net/ , https://github.com/codemirror/CodeMirror

富文本编辑器

1.mavonEditor:https://github.com/hinesboy/mavonEditor  这个可以左右屏同时预览markDown和文档。

2. https://quilljs.com/:富文本。用的人挺多  我自己没用过

3. https://www.tiny.cloud/: tinyMce感觉挺好看,来自于 https://panjiachen.github.io/vue-element-admin/#/example/create

4.  https://github.com/nhn/tui.editor#-examples  : tui-editor,功能很多哇,https://ui.toast.com/tui-editor,from:https://panjiachen.github.io/vue-element-admin/#/components/markdown ,但是文档较少

 5.muya: https://github.com/marktext/muya ,所见即所得

 6. bytemd : https://github.com/bytedance/bytemd

7. proseMirror:  https://github.com/ProseMirror/prosemirror ,所见即所得,支持md和富文本的转换。

8.百度的UEditor:https://github.com/fex-team/ueditor

9. 推荐: https://ckeditor.com/

再比如博客园的编辑器们:

 

 markdown编辑器,适合写文档,不适合做富文本编辑,md自定义样式太难了。

 

在线代码编辑器:

monaco-editor:  https://microsoft.github.io/monaco-editor/ , https://microsoft.github.io/monaco-editor/playground.html ,vscode的浏览器版本。

codepen: https://codepen.io/pen/

codesandbox: https://codesandbox.io/

ACE:https://ace.c9.io/ ,高性能的web代码编辑器

  

js写法性能测试:

https://jsbench.me/

https://jsperf.com

 

时间处理工具:

date-fns:好用,种类多

moment.js:好像没人维护了

dayjs:体积小

 

测试正则的工具:

https://regexr.com/30jrh

 

js编辑器:

https://jsbin.com/?html,css,js,console,output

https://jsfiddle.net/boilerplate/vue

 

JSX在线编译:

https://babeljs.io/en/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3&externalPlugins=

 

ast在线转换:

https://astexplorer.net/

 

在线幻灯片:

https://slides.com/

https://docs.google.com/presentation/u/0/

 https://sli.dev/

 

关键词搜索指数:

https://trends.google.com/trends/?geo=US

http://index.baidu.com/v2/index.html#/

 

组件库:

基于vue3的naive组件库: https://github.com/TuSimple/naive-ui

基于vue3的elementui-plus

antD:https://ant.design/index-cn

 

icon工具

xicons: https://github.com/07akioni/xicons/blob/main/README.zh-CN.md#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F

 

storybook

可以用来管理通用组件,通过写story来生成组件的使用文档以及预览,目前看storybook是比较成熟而且能满足能想到的需求而且对项目0侵入,缺点就是有一定上手成本。

 

 

Node调试工具:

whistle: https://github.com/avwo/whistle 

 

备忘清单

https://mp.weixin.qq.com/s/YO75couEP6n4D6i8Pz73rg

 

分步骤帮助引导工具:

https://introjs.com/docs/  适用于pc和h5

 

 

eslint配置

 vue3 + vite 项目中lint的配置:

https://juejin.cn/post/6975442828386107400

vscode的插件禁用vetur,安装volar

在 vscode 的 settings.json 新增配置:
"vue3snippets.enable-compile-vue-file-on-did-save-code": true,
"vue3snippets.tabWidth": 4,
"vue3snippets.singleQuote": true
其他配置可参考文档 https://github.com/Wscats/vue-snippets/blob/master/package.json ,然后开启底部工具栏的 Auto Format Vue;
 
 

看看 别人怎么查dns故障问题

 https://dns.google/  这个工具可以追踪dns解析路径。
 
 

hash工具

会议信息收集工具:

slido:https://app.sli.do,匿名
问卷
 

常见快捷键

  • 切换浏览器tab

    浏览器上一个tab:ctrl + shift + tab

    浏览器下一个tab: ctrl + tab

    浏览器第N个tab: command + 数字N(比如第8个tab:command + 8)

  • 打开控制台: option + cmd + J
  • 打开markdown预览:cmd-shift-v or ctrl-shift-v
  • 选择内容: shift + ↑ | ↓
  • 调整某一行的位置: option + ↑ | ↓
  • 全局查找文件: command + p
  • 在当前文件里查找替换:command + option + F
  • 在全局所有文件里查找替换:command + shift + H
 

vscode插件

Material Icon Theme插件,会给文件加icon,编辑器会更生动活泼些;
 
 

位图矢量转换工具

 
 
 
posted on 2020-12-14 11:26  搭错车的小火柴  阅读(241)  评论(0编辑  收藏  举报