MAC,VScode,安装 vue-devtools或在屏幕左上角的苹果 () 菜单中选取“强制退出”。方法1: a

MAC

Finder 永久展示所有隐藏文件夹: defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder

Finder 永久展示当前文件路径: defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Finder

锁屏：control+command+Q
全屏: control+command+F
Mac 关闭当前窗口 command + w/关闭当前应用 command + q
聚焦搜索: command+空格
亮度：F1，F2

Mac 强制退出应用：
- Option+Command+Esc（类似Control+Alt+Delete）
- 或在屏幕左上角的苹果 () 菜单中选取“强制退出”。
Mac查看计算机名：网络—高级—wins—metBIOS--FXXXXXXX
Mac打开活动监视器-Activity Monitor

Cmd+Space-->搜索框输入“Activity Monitor”-->enter

Mac下打开/usr/local目录 & 查看程序的安装目录 & 前往文件夹:
- 方法1: a. Finder 中 command+shift+G, 会弹一个搜索框; b. 输入/usr/local/bin/node，然后点击前往就可以了
- 方法2: 命令行中使用 which 命令, 即which node( windows系统中使用 where node 命令)查看程序的安装目录

浏览器:

打开 chrome 开发者工具：option + command + I
刷新浏览器: command+R/command+shift+R
Mac下新增浏览器标签command+D
Mac下快速切换浏览器窗口:

 # Safari和Chrome通用：
 control + tab # 切换到下一个标签
 # 仅适用于Safari：
 command + shift + [ （或←） # 切换到左边的标签
 command + shift + ] （或→） # 切换到右边的标签
 # 仅适用于Chrome：
 command + 数字键 # 切换到指定数字顺序的标签
 command + option + ← # 切换到左边的标签
 command + option + → # 切换到右边的标签

MAC下生成ssh-keygen -t rsa -C "chairuixue004@pingan.com.cn"
代码快注释: shift+option+A
tar解压与压缩打包命令

# 将整个 /dist 目录下的文件全部打包成为 /dist.tar
tar -cvf /dist.tar /dist      # 仅打包，不压缩！
tar -zcvf /dist.tar.gz /dist  # 打包后，以 gzip 压缩

# 查阅上述 /dist.tar.gz 文件内有哪些文件？
tar -ztvf /tmp/etc.tar.gz
# 由於我们使用 gzip 压缩，所以要查阅该 tar file 内的文件时，
# 就得要加上 z 这个参数了！这很重要的！

vscode

vs快捷键：
- 格式化代码：
  - MAC: Shift + Option + F
  - Windows：Shift + Alt + F
- 搜索
  - command+shift+F 全局搜索
  - command+F 文件中搜索
  - command+option 搜索替换
- 打开命令行
  - MAC:
    - 光标在编辑器上：Control + `
    - 通用：Command + J
  - Windows：Ctrl + `
vs编辑器配置

// settings.json
{
    "editor.tabSize": 2, // 编辑器缩进间距 ("Editor: Tab Size")
    "files.autoSave": "off", // 编辑器修改后自动保存
    "editor.fontSize": 14, // 编辑器文字大小
    "editor.wordWrap": true, // 换行：`editor.wordWrap` ( 快捷键: `option+z` )
    // 保存时自动格式化，默认只支持 js 文件
    "eslint.autoFixOnSave": true,// vscode代码保存时自动格式化成Eslint
    "files.associations": {
        "*.es": "javascript",
        "*.es6": "javascript"
    },
    // 控制编辑器是否应呈现空白字符 （“editor: Render Whitespace” ）
    "editor.renderWhitespace": true, 
    // 启用后，将在保存文件时剪裁尾随空格。
    "files.trimTrailingWhitespace": true,
    // File extensions that can be beautified as javascript or JSON.
    "beautify.JSfiles": [
        "",
        "es",
        "es6",
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc"
    ]
}

vscode 插件

Eslint

目的：保存时，vscode 代码能自动格式化成eslint风格的代码，并支持 html 和 vue 文件

使用： 1. 安装 eslint 插件； 2. 配置：

缺点：不会一次性修改所有的格式问题，需要进行多次save.

{
  // 保存时自动格式化，默认只支持 js 文件
  "eslint.autoFixOnSave": true, 

   // eslint.validate 用来配置作用的文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

Indent-rainbow
Material icon theme
Material theme
Git Balme

webpack

process.env.PORT
Linux: PORT=1234
Windows: set PORT=1234

webpack.HotModuleReplacementPlugin
webpack.NamedModulesPlugin
friendly-errors-webpack-plugin
EntryPlugin

portfinder 

dotenv

开发原则

关注 ui 体验—左右padding 从用户的角度思考

谷歌访问助手 —— 下载地址

参考链接：Vue调试神器vue-devtools安装

下载的压缩包解压后有一个.crx文件以及一个使用教程，可以按照这个教程安装。安装后，你的浏览器会多一个谷歌访问助手的插件。点击插件会弹出一个面板，上面有一个调整拓展程序商店的链接，点击调整之后你会打开一个和chrome商店一样的页面，在这上面你可以随心所欲安装你的插件。

安装 vue调试工具: vue-devtools —— chrome的插件

chrome商店直接安装: 需要翻墙才能下载。
手动安装
1. 找到 vue-devtools 的 github 项目，并将其 clone 到本地.
```
git clone https://github.com/vuejs/vue-devtools.git
```
1. 安装项目所需要的 npm 包
2. 编译项目文件
```
npm run build
```
1. 添加至 chrome 浏览器
浏览器输入“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。

ps：如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。