[效率提升]我擦, 早知道就能早点下班了

采九朵莲
2,197 阅读3分钟

本文整理了一些可以提升开(ma)发(zhuan)效率的的工具和技巧

Linux相关

Linux避免手滑误删跑路

$ cd
$ cd ../../home
$ mkdir -p ~/.Trash
$ vi ~/.bashrc

贴入如下代码

alias rm=trash        
alias rl='ls ~/.Trash'  
alias ur=undelfile  
undelfile()  
{  
  mv -i ~/.Trash/$@ ./  
}  
trash()  
{  
  mv $@ ~/.Trash/  
}
cleartrash()  
{  
    read -p "Clear trash?[n]" confirm  
    [ $confirm == 'y' ] || [ $confirm == 'Y' ]  && /usr/bin/rm -rf ~/.Trash/*  
}

$ source ~/.bashrc

至此可用指令 rm(删除), ur(撤销), rl(列出回收站), cleartrash(清空回收站）

参考: www.cnblogs.com/qzqdy/p/929…

Linux常用命令

  • 重命名文件夹 mv preName nextName
  • 删除文件(慎用)
$ rm -rf # remove recursive force
  • 回到根目录： cd / cd ~
  • 在文件浏览器打开目录： open dirName
  • 在vscode打开目录： code dirName
  • 显示隐藏的文件： ls -ah
  • 显示当前路径： pwd
  • 查看ip ifconfig

Mac相关

Mac 多显示器

如果你的Mac外接了显示器, 显示器经常没有信号, 请重置Mac的SMC, 参考: support.apple.com/zh-cn/HT201…

Mac Chrome快捷键

  • 打开 / 关闭 开发者工具 option + command + I / J
  • 切换标签 option + command + left / right
  • 打开新标签 command + T
  • 打开新窗口 command + N
  • 关闭 标签 / 窗口 command + W
  • 打开之前关闭(tichu)的标签(chrome可记忆十个) shift + command + T
  • 在新tab中打开链接 command + leftclick
  • 在新窗口中打开链接 shift + leftclick
  • mini最小化浏览器 command + M
  • 打开浏览器(自定义的) shift + command + .
  • hide隐藏浏览器 command + H
  • 隐藏浏览器以外的app option + command + H

参考: blog.csdn.net/coding1994/…

Mac iterm2快捷键

  • 切换标签 command + left / right
  • 清除iterm2屏幕: control + l
  • iterm2打开新tab: control + t

参考: blog.csdn.net/ws135286498…

Mac vscode快捷键

  • 多处光标 option + 鼠标左键
  • 向下插入一行 command + enter
  • 向上插入一行 shift + command + enter
  • 向上 / 下 移动行 option + up / down
  • 向上 / 下 复制行 shift + option + up / down
  • 查找 command + F
  • 查找下一个 command + G
  • 添加下一个查找 command + D
  • 选取全部与当前匹配的 shift + command + L
  • 注释 / 解注释 command + /
  • kill删除一整行 shift + command + k

Mac系统快捷键

  • 关闭窗口 / 标签 command + W
  • 浏览器 / 终端 新建标签 command + T
  • mini窗口最小化 command + M
  • 窗口最大化和还原 command + ctrol + F
  • hide隐藏最上层窗口 command + H
  • 隐藏最上层以外的窗口 command + option + H
  • 复制 / 粘贴 / 全选 / 撤销 command + C / V / A / Z
  • 删除文件到废纸篓 command + backspace
  • 浏览器刷新页面 command + r
  • 自定义快捷键打开app 参考: www.jianshu.com/p/abeb11231…
  • 自定义打开 iTerm2 command + .
  • 自定义打开 chrome command + shift + .
  • 自定义打开 vscode command + '
  • 自定义打开 wechat command + shift + '
  • 打开应用程序管理器 option + command + esc

Mac 关闭第三方程序验证

$ sudo spctl --master-disable
$ defaults write com.apple.LaunchServices LSQuarantine -bool false

npm 相关

npm tools

  • node check update 检查package.json文件里的npm包的更新
$ npm install -g npm-check-updates
$ ncu -a
  • http-server 开启静态资源服务器
$ npm install -g http-server
$ cd ProjectDirName
$ http-server

VSCode相关

VSCode user snippets用户自定义代码片段, 贴上我的

// vue.json
{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"\t<div class=\"$1-root\">",
			"\t\t",
  		"\t</div>",
			"</template>",
			"",
			"<script type=\"text/ecmascript-6\">",
			"export default {",
			"\tdata () {",	
			"\t\treturn {",		
			"\t\t\tdata: ''",			
			"\t\t}",	
			"\t}",
			"}",
			"</script>",
			"",
			"<style scoped lang=\"stylus\" rel=\"stylesheet/stylus\">",
			"@import \"~styles/mixin\"",
			"",
			".$1-root",
			"</style>",
		],
		"description": "vue"
	},
	"Print to console": {
		"prefix": "lg",
		"body": [
			"console.log('$1')"
		],
		"description": "Log output to console"
	},
	"Print to warn": {
		"prefix": "cw",
		"body": [
			"console.warn('$1')"
		],
		"description": "Print to warn"
	},
	"Arrow function": {
		"prefix": "af",
		"body": [
			"($1) => {",
			"  $2",
			"}"
		],
		"description": "Arrow function"
	},
	"Let": {
		"prefix": "l",
		"body": [
			"let $1 = $2"
		],
		"description": "Let"
	},
	"Const": {
		"prefix": "c",
		"body": [
			"const $1 = $2"
		],
		"description": "Const"
	},
	"Var": {
		"prefix": "v",
		"body": [
			"var $1 = $2"
		],
		"description": "Var"
	},
	"Import": {
		"prefix": "i",
		"body": [
			"import $1 from '$2'"
		],
		"description": "import"
	},
	"Import object": {
		"prefix": "im",
		"body": [
			"import { $1 } from '$2'"
		],
		"description": "import object"
	},
	"Export": {
		"prefix": "e",
		"body": [
			"export $1"
		],
		"description": "export"
	},
	"Function": {
		"prefix": "fn",
		"body": [
			"function $1 ($2) {",
			"\t$3",
			"}"
		],
		"description": "function"
	},
	"Arrow function": {
		"prefix": "af",
		"body": [
			"($1) => {",
			"\t$2",
			"}"
		],
		"description": "arrow function"
	},
	"Return": {
		"prefix": "r",
		"body": [
			"return $1"
		],
		"description": "return"
	},
	"If": {
		"prefix": "if",
		"body": [
			"if ($1) {",
			"  $2",
			"}"
		],
		"description": "if"
	},
	"Comment": {
		"prefix": "/",
		"body": [
			"/**",
			" * $1",
			" **/"
		],
		"description": "comment"
	}
}

VSCode user snippets用法

  • 新建一个test.vue文件输入vue, 你会看到提示
  • 然后tab, 就会duang~, 有了开局的代码, 注意$1出会用光标占位
  • 同理, lg + tab你会得到你经常使用的断点, af + tab你会得到一个风骚的箭头函数

Zen Coding / Emmet

html简写

// '#' 创建一个id特性
// '.' 创建一个类特性
// '[]' 创建一个自定义特性
// '>' 创建一个子元素
// '+' 创建一个兄弟元素
// '^' 提升元素层次
// '*' 相当于乘号,会创建n次相同的东西
// '$' 代替一个自增的数字
// '?' 用于有填充位的数字比如00,01
// '{}' 创建元素的文本
// 示例
// ul#container>li.item.highlight[data="" role=""]{text$}*5^ol>li*2
// 效果
<ul id="container">
  <li class="item highlight" data="" role="">text1</li>
  <li class="item highlight" data="" role="">text2</li>
  <li class="item highlight" data="" role="">text3</li>
  <li class="item highlight" data="" role="">text4</li>
  <li class="item highlight" data="" role="">text5</li>
</ul>
<ol>
  <li></li>
  <li></li>
</ol>

css简写

/* m0 */
/* p0 */
/* w100p */
/* h100p */
/* w100 */
/* h100 */
/* fl */
/* fr */
/* bgc */
/* l300 */
/* r300 */
/* mb300 */
/* df */
/* jcsb */
/* dt  */
/* duang~ 效果 */
width: 100px;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
width: 100px;
height: 100px;
float: left;
float: right;
background-color: #fff;
left: 300px;
right: 300px;
margin-bottom: 300px;
display: flex;
justify-content: space-between;
display: table;
avatar
文章
阅读
粉丝