答喵喵侠
作为一名前端开发,VSCode插件还挺多的,推荐几个实用的吧。
1.vue-helper
如果和我一样,经常写vue,那么这个插件必不可少,它可以快速补全常见的ui框架代码,比方说 element ui、ant-design-vue等,组件属性也可以很方便的插入;如果你想了解更多用法,可以直接通过组件点击跳转到官方文档。
当你想要快速跳转定义变量,比方说从template跳转到data里面,你只需要按住ctrl+鼠标左键,就可以快速跳转,简直不要太方便!
还有一个超级实用的功能,那就是按alt+x可以选中代码块,这是我最最常用的功能,比方说我这段代码要注释,无论是template还是methods,都可以选中这一块,实现快速选中、删除、注释等操作。快速选中配合cursor这样的ide指定特定行号很好用!
当然这款插件还有很多功能,可以自行探索。
2.Prettier
这个是代码格式化必备插件,不用多说,我分享一个我自己的配置吧。
{
// 箭头函数参数是否使用括号
// "avoid" 表示只有一个参数时省略括号,多个参数时才添加
"arrowParens": "avoid",
// 标签的闭合括号是否与内容在同一行
// false 表示闭合括号单独成行
"bracketSameLine": false,
// 对象字面量的括号之间是否添加空格
// true 表示 { foo: bar } 而非 {foo: bar}
"bracketSpacing": true,
// 嵌入式代码的格式化方式
// "auto" 表示自动识别并格式化嵌入式代码(如HTML中的JS)
"embeddedLanguageFormatting": "auto",
// HTML空白敏感度
// "css" 表示遵循CSS的空白处理规则,影响元素间空格的处理
"htmlWhitespaceSensitivity": "css",
// 是否在格式化后的文件顶部插入 @format 注释
// false 表示不插入
"insertPragma": false,
// JSX中是否使用单引号
// false 表示使用双引号
"jsxSingleQuote": false,
// 每行代码的最大字符数
// 超过这个长度会自动换行,设置为140
"printWidth": 140,
// prose(散文)内容的换行方式
// "preserve" 表示保持原有换行,不自动格式化
"proseWrap": "preserve",
// 对象属性是否使用引号
// "as-needed" 表示只在必要时添加引号(如属性名包含特殊字符时)
"quoteProps": "as-needed",
// 是否要求文件顶部必须有 @prettier 注释才进行格式化
// false 表示不需要,可以格式化所有文件
"requirePragma": false,
// 语句末尾是否添加分号
// false 表示不添加分号
"semi": false,
// 是否使用单引号代替双引号
// false 表示使用双引号
"singleQuote": false,
// 缩进的空格数
// 设置为2个空格
"tabWidth": 2,
// 对象、数组等末尾是否添加 trailing comma
// "all" 表示尽可能添加(包括函数参数)
"trailingComma": "all",
// 是否使用制表符(tab)进行缩进
// false 表示使用空格缩进
"useTabs": false,
// Vue文件中script和style标签是否缩进
// false 表示不缩进
"vueIndentScriptAndStyle": false
}
基本上能涵盖大部分项目,部分的文件如果不想格式化,可以选择指定忽略,这里不过多赘述。
3.One Dark Pro
这是一款主题插件,非常好看,我用好多年了,分享一下。