欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Mac 开发环境配置

程序员文章站 2024-02-19 17:58:52
...

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"
  }
]