Vscode(Mac)

快捷键

选中文字

⌥(option) + 方向键 YYDS

• 选择并插入最后一行 ⌥(option)键 + ⇧(shift) + I
• 进行多列的操作执行上方快捷键之后，可使用 ⌥(option) + 方向键快速定位到内容类同的位置进行多列操作
• ⇧(shift) + 鼠标点击可以选中光标到鼠标点击的区域
• ⇧(shift) + ⌥(option)进行鼠标点击或者拖动可以进行多列编辑
• ⌃(control) + D可以选中下一个相同的单词、文字
• ⌃(control) + U可以选中上一次选中的内容，u在vim中是撤销的意思，有点相似，比较好记

展开/折叠

• Fold All 折叠全部 ⌘+k+⌘+0
• Fold Level x 折叠级别 ⌘+k+⌘+x 其中x是数字，折叠的级别
• Toggle Fold 切换折叠 ⌘+k+⌘+l
• UNFold All 展开全部 ⌘+k+⌘+j

路径别名的配置

使用Path Intellisense, 配置见下方

同时路径会失去注释，请添加jsconfig/tsconfig.json文件中的paths配置中设置别名,如果同时使用了rollup或者webpack之类的打包工具，同时配置别名即可

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

插件

• 工具类

  • open in browser 没的说吧yyds
  • Auto Close Tag Auto Rename Tag 配合使用书写标签绝配
  • PostCSS Language Support css语法提示
  • Vue Language Features (Volar) Vue语法高亮与提示插件
  • Tailwind CSS IntelliSense tailwindcssopen in new window提示插件
  • WindiCSS IntelliSense 从插件同上方功能相同，建议如果使用tailwindcss就用上方windicss就用这个

• 编辑器主题

  • One Dark Pro 一个暗黑色主题
  • Peacock 项目主题颜色 ⇧+⌘+p找到Peacock 键入颜色
  • Color Highlight 颜色高亮

• 代码规范相关

  • Prettier ESLint
  • Prettier - Code formatter

• 不再建议的插件

  • Path Intellisense webpack的路径别名之类的

    // setting.json
    "path-intellisense.mappings": {
       "@": "${workspaceRoot}/src/",
       "/": "${workspaceRoot}/",
       "~": "${workspaceRoot}/src/"
    }
    

vscode的一些其他配置

• ⌘+⇧+p 打开命令面板
• ⌘+p 打开文件
  • 输入@可以搜索文件内容
  • 输入:可以跳转多少行