vscode配置常用的插件

1.插件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.setting
{
“workbench.colorTheme”: “Horla”,
“editor.fontSize”: 18,
“editor.fontWeight”: “300”,
“workbench.iconTheme”: “vscode-icons”,
“editor.tokenColorCustomizations”: {
“comments”: “#0400ffee”, // 注释
“keywords”: “#FF00CC”, // 关键字
“variables”: “#3399FF”, // 变量名
“strings”: “#c404ff”, // 字符串
“functions”: “#ff0000fd”, // 函数名
“numbers”: “#fc0000ee” // 数字
},
“editor.tabSize”: 2,
“editor.formatOnSave”: true,
“prettier.trailingComma”: “es5”,
“prettier.singleQuote”: true,
“terminal.integrated.shell.windows”: “D:\Git\bin\bash.exe”,//自己电脑gitbash的地址
“editor.mouseWheelZoom”: true,
“files.insertFinalNewline”: true,
“files.autoSave”: “off”,
“prettier.arrowParens”: “always”,
“prettier.useTabs”: true,
“editor.autoClosingOvertype”: “never”,
“editor.autoSurround”: “never”,
“vsicons.dontShowNewVersionMessage”: true,
“[html]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[vue]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
}

3.代码片段
{
// Place your snippets for properties here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
“Print to console”: {
“scope”: “editorconfig”,
“prefix”: “init”,
“body”: [
“root = true”,
“”,
“[]",
“charset = utf-8”,
“indent_size = 2”,
“indent_style = space”,
“end_of_line = lf”,
“trim_trailing_whitespace = true”,
“insert_final_newline = true”,
“tab_width = 2”,
“”,
"[
.md]”,
“trim_trailing_whitespace = false”
],
“description”: “init editorconfig”
}
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Visual Studio Code (VSCode) 是一个强大的代码编辑器,它支持各种语言和插件扩展,包括CSS开发。配置CSS插件可以提升代码编写和格式化的体验。以下是一些基本步骤来安装和配置CSS插件: 1. **安装Live CSS Autoformatting 插件**:推荐使用 "Prettier - Code formatter" 或 "CSS Autofmt" 这样的插件,它们能够自动格式化你的CSS代码。可以在VSCode的扩展市场中搜索并安装。 - 打开VSCode,点击左侧的 Extensions (扩展) 按钮或按 `Ctrl+Shift+X`(Windows/Linux)或 `Cmd+Shift+X`(Mac)。 - 在搜索框中输入 "Prettier" 或 "CSS Autofmt",找到后点击Install。 2. **配置Prettier**: - 安装完成后,重启VSCode以加载新插件。 - 需要在项目根目录或`.prettierrc`文件中配置Prettier的设置,如选择哪种CSS格式、是否对嵌套规则等。可以通过文件`settings.json`自定义配置,例如: ```json { "editor.formatOnSave": true, "prettier.configPath": "./prettier.config.js", "prettier.parser": "sugarss" // 或者其他你喜欢的解析器 } ``` - 对于`.prettierrc`或`.prettierrc.js`文件,请根据需要添加相应的选项。 3. **启用自动格式化**: - 在`settings.json`或`keybindings.json`中,你可以设置快捷键自动触发格式化。比如添加: ```json { "key": "alt+shift+f", // 或者你想要的任意组合键 "command": "editor.action.formatDocument", "when": "editorTextFocus && vim.mode == 'Normal'" } ``` 4. **其他可选插件**: - 如果你需要更高级的功能,如代码提示、样式管理,可以安装 "CSS Lint" 或 "Stylelint" 来提高代码质量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值