Mac 开发环境配置

1. 命令行alias的配置

alias gco="git checkout [email protected]"
alias gcom="git checkout master"
alias gdf="git difftool [email protected]"
alias gp="git pull"
alias gps="git push"
alias gsh="git stash"
alias gus="git status"
alias hd="hey dev"
alias kd="killl dev"
alias gshp="git stash pop"
alias gd="git difftool"
alias gr="git reset --hard"
alias gc="git commit -m [email protected]"

2. Visual Studio Code

2.1 常用基础设置

//  User Setting
{
    "editor.tabSize": 2,
    "window.zoomLevel": 0,// Specifies the color theme used in the workbench.
    "workbench.colorTheme": "Monokai",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "git.enableSmartCommit": true,
    "git.ignoreMissingGitWarning": true,
    "window.openFilesInNewWindow": "on",
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "html"
        ],
    "eslint.options": {
        "configFile": "/Users/tangyefei/Documents/lieluobo-webui/.eslintrc.js",
        "plugins": ["html"]
    },
    "breadcrumbs.enabled": true
}

2.2 常用插件配置

a. ESLint的配置

在Vue的开发中语法错误可能只出现warning不会报error，但是却会导致页面不能正常渲染。使用ESLint插件进行语法检测，可以规避掉一部分因为粗心导致的低级错误，减少事故发生。

说在前面

• 生成.eslintrc.js会出现terminal无响应，属于node v8.1的问题升级到新版可以解决
• 安装插件如果blocked可以改成淘宝镜像进行安装，例如：

$ npm --registry https://registry.npm.taobao.org install --g eslint

配置步骤

1. 安装ESLint $ npm install -g eslint
2. 使用 $ eslint --init 初始文件 .eslintrc.js
3. VSCode中安装ESLint扩展
4. 安装插件支持html/vue文件检测, $ npm install -g eslint-plugin-html
5. 修改VSCode配置，将 eslint.options指向到.eslintrc.js生成的位置，并使安装的html插件，并校验 html vue文件

setting.json 配置参考：

"eslint.options": {
"configFile": "/Users/yefeitang/Documents/projects/marketing/web/.eslintrc.js", // place your .eslintrc.js file location inited
    "plugins": ["html"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
]

2.3 Snippets示例

// Snippets
{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. 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": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "Quick call request": {
        "scope": "javascript,typescript",
        "prefix": "llbreq",
        "body": [
            "R.$1.$2($3).then(resp => {",
            "  if(resp.code == 1) {",
            "  }",
            "});"
        ],
        "description": "Log output to console"
    },
    "Quick ajax post": {
        "scope": "javascript,typescript",
        "prefix": "llbpost",
        "body": [
            "${1:$CLIPBOARD}(param) {",
            "  return Ajax.postJson(`/$2/$3`, param);",
            "},",
        ],
        "description": "Quick ajax post"
    },
    "Quick ajax get": {
        "scope": "javascript,typescript",
        "prefix": "llbget",
        "body": [
            "${1:$CLIPBOARD}(param) {",
            "  return Ajax.get(`/$2/$3`);",
            "},",
        ],
        "description": "Quick ajax post"
    },

    "Heyui Success": {
        "scope": "javascript,typescript",
        "prefix": "success",
        "body": [
            "${1:this}.Message.success('${2}');"
        ],
        "description": "Quick ajax post"
    }
}

2.4 快捷键 keybindings.json

// Place your key bindings in this file to overwrite the defaults
[
  {
    "key": "cmd+k cmd+[",
    "command": "editor.foldRecursively",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+k cmd+[",
    "command": "-editor.foldRecursively",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+k cmd+]",
    "command": "editor.unfoldRecursively",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+k cmd+]",
    "command": "-editor.unfoldRecursively",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+cmd+u",
    "command": "editor.action.transformToUppercase"
  },
  {
    "key": "alt+cmd+l",
    "command": "editor.action.transformToLowercase"
  },
  {
    "key": "ctrl+`",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "cmd+b",
    "command": "-workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "cmd+b",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+`",
    "command": "-workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "shift+cmd+]",
    "command": "-workbench.action.nextEditor"
  },
  {
    "key": "shift+cmd+]",
    "command": "editor.action.selectToBracket"
  },
  {
    "key": "ctrl+cmd+right",
    "command": "workbench.action.moveEditorRightInGroup"
  },
  {
    "key": "cmd+k shift+cmd+right",
    "command": "-workbench.action.moveEditorRightInGroup"
  },
  {
    "key": "cmd+k shift+cmd+left",
    "command": "-workbench.action.moveEditorLeftInGroup"
  },
  {
    "key": "cmd+k cmd+j",
    "command": "editor.foldAll",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+k cmd+0",
    "command": "-editor.foldAll",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+k cmd+l",
    "command": "editor.unfoldAll",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+k cmd+j",
    "command": "-editor.unfoldAll",
    "when": "editorTextFocus"
  }
]