vscode

官网: https://code.visualstudio.com/ (opens new window)

插件安装

• Chinese (Simplified) Language Pack for Visual Studio Code 汉化插件
• vetur vue.js 代码提示，语法高亮
• ESlint 格式化
• prettier 格式化
• Emmet 代码提示
• View In Browser
• Code Runner 安装完 code runner 后需重启才能运行 js
• ES7 React/Redux/GraphQL/React-Native snippets react 项目支持插件
• JavaScript (ES6) code snippets ES6 语法中的 JavaScript 代码片段（支持 JavaScript 和 TypeScript）
• HTML CSS Support 支持 html 编写 class 提示已经定义的类名
• Path Autocomplete 路径完成提示
• Path Intellisense
• Auto Rename Tag 适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签
• Auto-Open Markdown Preview 打开 Markdown 文件时自动打开 Markdown 预览
• Turbo Console.log() 支持对下面一行中的任何变量进行日志记录，并在代码结构之后自动添加前缀。

vscode 格式化插件：https://segmentfault.com/a/1190000014796012

用户设置

设置完不生效是需要启用 eslint，在 vue 页面右下角，选择 eslint

旧版本格式化：

"eslint.autoFixOnSave": true

新版用这个：

"editor.formatOnSave": true,

{
  "editor.tabSize": 2,
  // 分号
  "prettier.semi": false,
  // 单引号包裹字符串
  "prettier.singleQuote": true, //  #让函数(名)和后面的括号之间加个空格
  // 函数前是否加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择
  //配置eslint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll": true, // 保存时使用eslint校验文件
    "source.fixAll.eslint": true, // 文件保存时开启eslint自动修复程序
    "source.fixAll.stylelint": true // 文件保存时开启stylelint自动修复程序
  },
  "editor.formatOnSave": true,
  // 根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  // jsx语法自动补全
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

用户代码片段

javascript.json

{
  "function": {
    "prefix": "fc",
    "body": "function ${1:name}() {\n\n${2}}",
    "description": "function 方法"
  },
  "import js": {
    "prefix": "ijs",
    "body": "import {$0} from '';",
    "description": "导入js"
  },
  "import components": {
    "prefix": "icomponents",
    "body": "import $0 from '@/components/';",
    "description": "导入 components"
  },
  "import api": {
    "prefix": "icomponents",
    "body": "import $0 from '@/https/api';",
    "description": "导入 api"
  },
  "Print to console": {
    "prefix": "clg",
    "body": ["console.log('my console $1 : ', $1);"],
    "description": "Log output to console"
  },
  "Print to json console": {
    "prefix": "clgj",
    "body": ["console.log('my console $1 : ' + JSON.stringfy($1))"],
    "description": "Log output to console json"
  },
  "js notes": {
    "prefix": "jnotes",
    "body": [
      "/**",
      " * @author Roninwz",
      " * function: $1",
      " * use:      ***",
      " */"
    ],
    "description": "js 注释 notes"
  },
  "vue watch": {
    "prefix": "vwatch",
    "body": ["watch: {", "  demoProp(value) {", "    $1", "  }", "},"],
    "description": "Create vue watch"
  },
  "vue computed": {
    "prefix": "vcomputed",
    "body": ["computed: {", "  demoProp() {", "    return $1", "  }", "},"],
    "description": "Create vue computed"
  },
  "vue filters": {
    "prefix": "vfilters",
    "body": [
      "filters: {",
      "  demoProp: function (value) {",
      "    if (!value) return ''",
      "    return $1",
      "  }",
      "},"
    ],
    "description": "Create vue filters"
  },
  "vue props": {
    "prefix": "vprops",
    "body": [
      "props: {",
      "  items: {",
      "    type: Array,",
      "    default: () => {",
      "      return [];",
      "    }",
      "  }",
      "},"
    ],
    "description": "Create vue props"
  },
  "vue query": {
    "prefix": "vquery",
    "body": [
      "if (this.\\$route.query.source) {",
      "  this.source = this.\\$route.query.source;",
      "}"
    ],
    "description": "Create vue query"
  },
  "vue router push": {
    "prefix": "vrouterp",
    "body": ["this.\\$router.push({", "  path: \"/\",", "  query: { }", "});"],
    "description": "Create vue router push"
  },
  "vue router replace": {
    "prefix": "vrouterr",
    "body": [
      "this.\\$router.replace({",
      "  path: \"/\",",
      "  query: { }",
      "});"
    ],
    "description": "Create vue router replace"
  },
  "vue init": {
    "prefix": "vinit",
    "body": ["init$0(){", "},"],
    "description": "vue init method"
  },
  "js moment": {
    "prefix": "jmoment",
    "body": ["moment($0).format(\"YYYY-MM-DD\")"],
    "description": "js moment format"
  },
  "js switch": {
    "prefix": "jwitch",
    "body": [
      "switch (name) {",
      "  case \"demo\":",
      "    break;",
      "  default:",
      "    break;",
      "}"
    ],
    "description": "js switch shell"
  },
  "js for": {
    "prefix": "jfor",
    "body": ["for (let index = 0; index <= arr.length; index++) {", "}"],
    "description": "js for 循环"
  },
  "js forEach": {
    "prefix": "jforEach",
    "body": ["arr.forEach(item=>{", "}"],
    "description": "js forEach 循环"
  }
}

vue.json

  "vue template": {
       "prefix": "vue",
       "body": [
           "<template>",
           "    <div>\n",
           "    </div>",
           "</template>\n",
           "<script>",
           "export default {",
           "    components: {\n",
           "    },",
           "    data() {",
           "        return {\n",
           "        };",
           "    },",
           "    created() {\n",
           "    },",
           "    mounted() {\n",
           "    },",
           "    watch: {\n",
           "    },",
           "    computed: {\n",
           "    },",
           "    methods: {\n",
           "    },",
           "};",
           "</script>\n",
           "<style scoped lang=\"${1:scss}\">\n",
           "</style>\n",
       ],
       "description": "Create vue template"
   }

scss.json

{
  "flex layout": {
    "prefix": "cflex",
    "body": [
      "display: flex;",
      "flex-direction: row;",
      "align-items: center;",
      "justify-content: center;"
    ],
    "description": "flex 布局"
  },
  "box sizing": {
    "prefix": "cbox",
    "body": [
      "box-sizing: border-box;",
      "-moz-box-sizing: border-box; /* Firefox */",
      "-webkit-box-sizing: border-box; /* Safari */"
    ],
    "description": "box 布局"
  },
  "css bimg": {
    "prefix": "cbimg",
    "body": [
      "background: url(\"~@/assets/img/demo@2x.png\") center no-repeat;",
      "background-size: contain;"
    ],
    "description": "css 背景图"
  }
}

快捷键：

ctrl+f 局部查找

ctrl+shift+f 全局查找

ctrl+G 定位到哪一行

ctrl+p 查找文件

Shift+Alt+Up 或 Shift+Alt+Down 向上向下复制一行 Alt+Up 或 Alt+Down 上下移动一行

折叠所有区域代码的快捷： 先 ctrl + k 后 ctrl + 0 ;

展开所有折叠区域代码的快捷：先 ctrl +k 后 ctrl + J ;

代码行缩进 Ctrl+[ 、 Ctrl+] Ctrl+C 、 Ctrl+V 复制或剪切当前行/当前选中内容 代码格式化： Shift+Alt+F，或 Ctrl+Shift+P 后输入 format code 在当前行下边插入一行 Ctrl+Enter 在当前行上方插入一行 Ctrl+Shift+Enter

快速编写 css

• w10 width: 10px;
• h10 height: 10px;
• p0 padding: 0;
• m40 margin: 40px;
• m40-50 margin: 40px 50px;
• z1 z-index: 1;
• oxh overflow-x: hidden;
• oxs overflow-x: scroll;
• oh overflow: hidden;
• bd border: 1px solid #000;
• bdr border-right: 1px solid #000;
• bd2-s border: 2px solid;
• cup cursor: pointer;

技巧

• 快速回到上一级并折叠 键盘 <- 就可以回到上级。

vscode 侧边栏字体大小

C:\software\VSCode\resources\app\out\vs\workbench\workbench.desktop.main.css 查找 .part>.content 修改如下的字体大小 font-size