VS Code

快速创建 HTML

自动计数

<ui>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ui>

div>ui>li{$}*3

如果生成两位数则使用两个连续的 $$ ，更多位数以此类推

自动添加单词

div>ul>li>lorem4*5

定位代码

⇧⌘O 快捷键唤起符号导航面板，在当前编辑的文件中通过符号快速定位代码。 按下快捷键 ⌘\ 将活动编辑器拆分为两个。 按下快捷键 ⌘1 切换活动编辑器。

光标移动

1. 移动到单词的最前面：option + ←
2. 移动到单词最末尾：option + →
3. 将当前行代码移动到上一行：option + ↑
4. 将当前行代码移动到下一行：option + ↓
5. 移动到当前行最前面：cmd + ←
6. 移动到当前行最末尾：cmd + →
7. 花括号之间跳转：cmd + shift + \
8. 移动到文档第一行或最后一行：cmd + ↑ / cmd + ↓

文本选择

基于单词，行，文档的光标操作加上个 shift 键，就可以移动光标的同时选择文本；例如，选择当前光标所在位置到当前行最前面的代码：cmd + ← + shift

删除操作

1. 删除当前行光标后的所有字符：cmd + fn + delete
2. 删除当前行光标前的所有字符：cmd + delete
3. 删除当前单词光标后的字符：option + fn + delete
4. 把当前单词光标前的字符删除：option + delete

添加注释

1. 注释一行代码：cmd + /
2. 注释一整段代码：option + shift + A

格式化代码

1. 格式化代码：option + shift + F
2. 格式化选中行代码：cmd + K cmd + F
3. 代码缩进：cmd + shift + P

文件、符号、代码之间的快速跳转

1. control+ tab(同时按住)，继续按着control键，松开tab键： 打开当前打开文件的列表，选择要打开文件，松开control就能打开对应文件
2. cmd + P打开最近打开文件列表，同时列表顶部出现搜索框，搜索文件名，回车（enter），可以再当前窗口打开对应文件；使用cmd + enter会在新的编辑器窗口打开这个文件
3. control + G：行跳转，输入对应数字回车，可以跳转到当前文件的当前行
4. cmd + P(输入文件名 + “:” + 行数)：跳转到指定文件的指定行数
5. cmd + shift + O：调出当前文件的符号（函数名等），使用方向键或者搜索，回车，就能跳转到你想要的符号；如果输入“:”可以对当前文件的所有符号进行分类
6. cmd + T：打开多个文件，搜索多个文件中的符号
7. F12：跳转到函数的定义处
8. cmd + F12：跳转到函数的实现位置；注：js 中没有接口的概念，定义和实现是相同的，所以 js 中的 F12 和 Cmd + F12 效果是一样的
9. shift + F12：打开函数引用的预览（把光标放在函数或者类上，按shift+F12可以打开一个引用列表和内嵌编辑器）

鼠标操作

1. 在 vscode 中，单击鼠标左键：把光标移动到响应的位置；双击鼠标左键：将当前光标下的单词选中；三击鼠标左键：选中当前行代码；四次点击鼠标左键：选中整个文档
2. 鼠标左键单击行号：直接选中所在行；选中后，再按着shift，鼠标左键再次选择行：可以选中多行代码
3. 悬停提示窗口：当鼠标移动到某些文件上之后，一会就会显示跟鼠标下文本相关的信息；如果鼠标放在某个函数上，按下cmd时，则能在悬停提示的窗口上看到该函数的实现。
4. 代码的跳转和链接：如果我们把鼠标放在函数上时，函数下方会出现一个下划线，然后当我们按下鼠标左键时，就能跳转到该函数的定义处。cmd + 鼠标左键，跳转到函数、变量定义的地方。当我们再编写 Markdown 这样的非编程语言的文档时，还可以通过 cmd+鼠标左键能打开超级链接

Prettier

Prettier 是一个代码格式化的工具。

安装使用

pnpm add -D prettier

创建 .prettierrc 文件，配置 Prettier 如何格式化代码 ，以下是常用配置

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "proseWrap": "never",
  "endOfLine": "lf"
}

更多配置可以参考以下或查看 官网

module.exports = {
  // 行宽 default:80
  printWidth: 100,
  // tab 宽度 default:2
  tabWidth: 2,
  // 使用 tab 键 default:false
  useTabs: false,
  // 语句行末是否添加分号 default:true
  semi: false,
  // 是否使用单引号 default:false
  singleQuote: true,
  // 对象需要引号在加 default:"as-needed"
  quoteProps: 'as-needed',
  // jsx单引号 default:false
  jsxSingleQuote: true,
  // 最后一个对象元素加逗号 default:"es5"
  trailingComma: 'es5',
  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 default:true
  bracketSpacing: true,
  // 将 > 多行 JSX 元素放在最后一行的末尾，
  // 而不是单独放在下一行（不适用于自闭元素）。default:false
  jsxBracketSameLine: false,
  // (x) => {} 是否要有小括号 default:"always"
  arrowParens: 'always',
  // default:0
  rangeStart: 0,
  // default:Infinity
  rangeEnd: Infinity,
  // default:false
  insertPragma: false,
  // default:false
  requirePragma: false,
  // 不包装 markdown text default:"preserve"
  proseWrap: 'never',
  // HTML空白敏感性 default:"css"
  htmlWhitespaceSensitivity: 'strict',
  // 在 *.vue 文件中 Script 和 Style 标签内的代码是否缩进 default:false
  vueIndentScriptAndStyle: true,
  // 末尾换行符 default:"lf"
  endOfLine: 'auto',
  // default:"auto"
  embeddedLanguageFormatting: 'auto',
  overrides: [
    {
      files: '*.md',
      options: {
        tabWidth: 2,
      },
    },
  ],
}

创建 .prettierignore 文件，忽略不需要格式化的文件

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

**/*.svg
**/*.ejs
package.json

命令行

# 格式化所有文件
pnpm exec prettier --write .

# 格式化某些文件夹下的文件
pnpm exec prettier --write app/

# 格式化具体文件
pnpm exec prettier --write app/components/Button.js

# 格式化所有匹配到的文件
pnpm exec prettier --write "app/**/*.test.js"

prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"

Reference

• VS Code 快速创建 HTML 标签