VS Code编写CSS时如何让光标自动定位到行尾？

方法1：调整编辑器自动格式化设置 #

打开VS Code设置（快捷键Ctrl+,/Cmd+,），搜索并修改以下选项：

• 将Editor: Format On Type设为true：输入代码时自动格式化，输入完颜色值后光标会自动移到分号后方。
• 搜索CSS > Format: Semicolons，设置为insert，确保每个属性后自动添加分号，且光标落在分号之后。

方法2：自定义CSS代码片段 #

1. 打开代码片段面板：按Ctrl+Shift+P/Cmd+Shift+P，输入Configure User Snippets，选择css.json。
2. 添加如下代码片段（以color属性为例）：

{
  "Color Property": {
    "prefix": "color",
    "body": [
      "color: ${1:#fff};$0"
    ],
    "description": "Color property with cursor at end"
  }
}

使用时输入color按回车，选中颜色值修改后，按Tab键光标会直接跳到分号后的行尾位置，直接回车即可换行。

方法3：自定义快捷键绑定 #

1. 打开快捷键设置：按Ctrl+K Ctrl+S/Cmd+K Cmd+S，点击右上角的「打开键盘快捷方式（JSON）」图标。
2. 添加如下配置：

{
  "key": "enter",
  "command": "cursorEnd",
  "when": "editorLangId == css && textInputFocus && !editorReadonly && selectionContains == 'color'"
}

这个配置的作用是：在CSS文件中选中颜色值时，按回车键会先自动跳到行尾，再执行换行操作。

内容的提问来源于stack exchange，提问作者ShuQiang