vscode开发工具

目录

• 创建随机字符串
• 计算css选择器的权重
• 此文件是二进制文件或使用了不受支持的文本编码，所以无法在文本编辑器中显示
• css代码折叠
• 设置格式化代码缩进
• vscode书写console.log()使用log快捷键自动生成默认换行，去掉换行
• 创建markdown文件类型代码片段
• 跳转到指node_modules库时导航栏没有定位文件
• 格式化html代码时使属性和标签不换行
• 插件
  • project-tree
  • Auto Rename Tag: 自动修改闭合标签名称
• 快捷键
  • 光标定位和选中
    • 定位多个光标
    • 选中多个单词
  • 切换单词大小写、驼峰、kebab样式
  • 光标换行
  • 复制当前行

创建随机字符串

输入lorem，也可以指定随机字符串长度

计算css选择器的权重

鼠标悬停选择器，vscode计算权重

此文件是二进制文件或使用了不受支持的文本编码，所以无法在文本编辑器中显示

使用sublime text打开，选择编码为utf-8即可。

css代码折叠

/* #region 描述 */
代码
/* #endregion 描述 */

设置格式化代码缩进

vscode书写console.log()使用log快捷键自动生成默认换行，去掉换行

设置: 设置->用户代码片段->搜索javascript->把$2去掉

---

创建markdown文件类型代码片段

1.控制面板: 打开open user setting (json)
2.配置允许markdown文件类型快速代码片段

"[markdown]":  {  
    "editor.quickSuggestions": {
        "strings": true,
        "comments": true,
        "other": true
    }
} 

3.配置markdown文件代码片段
控制面板->Snippets->Configure Snippets->选择markdown类型
添加配置:

{
	"create  markdown": {
		"prefix": "md",
		"body": [
			"代码片段",
			"$2"
		],
		"description": "markdown模板"
	}
}

跳转到指node_modules库时导航栏没有定位文件

设置中搜索Auto Reveal Exclude，移除**/node_modules

cmd + 点击左侧导航栏立即定位到文件:

格式化html代码时使属性和标签不换行

安装Prettier - Code formatter插件

修改配置

完整配置:

{
  "update.showReleaseNotes": false,
  "extensions.autoCheckUpdates": false,
  "extensions.autoUpdate": false,
  "security.workspace.trust.untrustedFiles": "newWindow",
  "workbench.editorAssociations": {
    "*.mp4": "default",
    "*.log": "default"
  },
  "git.confirmSync": false,
  "git.suggestSmartCommit": false,
  "git.autofetch": true,
  "workbench.tree.indent": 16,
  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  "files.autoGuessEncoding": true,
  "chatgpt.emailAddress": "dennisurtonry@outlook.com",
  "pasteImage.path": "../pic",
  "editor.unicodeHighlight.nonBasicASCII": false,
  "editor.fontSize": 16,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "update.mode": "manual",
  "create-uniapp-view.style": "scss",
  "liveServer.settings.donotShowInfoMsg": true,
  "Lingma.localMachineModel": true,
  "editor.inlineSuggest.showToolbar": "always",
  "files.autoSave": "onFocusChange",
  "cnblogsClient.macos.workspace": "~/Documents/code/article-group/cnblog",
  "cnblogsClient.linux.workspace": "~/Documents/code/article-group/cnblog",
  "cnblogsClient.windows.workspace": "~/Documents/code/article-group/cnblog",
  "tabnine.experimentalAutoImports": true,
  "files.encoding": "utf8bom",
  "emmet.variables": {
    "lang": "zh-CN"
  },
  "editor.detectIndentation": false,
  "editor.codeActionsOnSave": {},
  "vsintellicode.java.completionsEnabled": false,
  "vsintellicode.python.completionsEnabled": false,
  "vsintellicode.sql.completionsEnabled": false,
  "Codegeex.License": "",
  "Codegeex.Privacy": true,
  "redhat.telemetry.enabled": true,
  "chat.commandCenter.enabled": false,
  "editor.tabSize": 2,
  "vetur.completion.scaffoldSnippetSources": {
    "workspace": "💼",
    "user": "🗒️",
    "vetur": "✌"
  },
  "search.exclude": {
    "**/node_modules": false
  },
  "explorer.autoRevealExclude": {
    "**/node_modules": false
  },
  // 各类型代码默认格式化方式
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatterOptions": {
  

    // for html
    "prettyhtml": {
      "tabWidth": 2,
      "wrapAttributes": false,
      "sortAttributes": false,
      "bracketSpacing": true,
      "printWidth": 200 //可以根据自己的屏幕宽度配置对应的换行宽度
    },
    // for js css
    "prettier": {
      "eslintIntegration": true,
      // 使用单引号
      "singleQuote": true,
      // 不加分号
      "semi": true,
      "tabWidth": 2,
      "printWidth": 140,
      "bracketSpacing": true,
      "useTabs": false,
      // vue文件js箭头函数单一参数避免自动添加括号
      "arrowParens": "avoid"
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // js文件中箭头函数单一参数避免自动添加括号
    "prettier.arrowParens": "avoid",
    // 使用单引号
    "prettier.singleQuote": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.compactFolders": false,
  "markdown.editor.updateLinksOnPaste.enabled": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "never"
}

---

插件

project-tree

树形结构显示项目文件

1.将项目单独使用vscode新窗口打开
2.打开命令面板，输入project tree，回车
3.自动把项目属性结构生成到Readme.md文件中

vue-test
├─ .gitignore
├─ README.md
├─ babel.config.js
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  │  ├─ HelloWorld.vue
│  │  ├─ School.vue
│  │  ├─ Student.vue
│  │  └─ Teacher.vue
│  └─ main.js
└─ vue.config.js

---

---

Auto Rename Tag: 自动修改闭合标签名称

---

快捷键

光标定位和选中

定位多个光标

自由定位多个光标: option + 鼠标选中

纵向定位多光标: option + cmd + 上/下方向键

选中多个单词

定位多个光标后: shift + option + 右方向键

切换单词大小写、驼峰、kebab样式

1.选中单词
2.命令板: shift + cmd + p
3.输入: transform

光标换行

向下换行: cmd + enter
向上换行: shift + cmd + enter

复制当前行

1.cmd + c
2.cmd + v