基础设置
设置中文:安装扩展MS-CEINTL.vscode-language-pack-zh-hans,然后重启
类名补全：ecmel.vscode-html-css
"css.styleSheets": [
"src/**/*.css",
"styles/*.css",
"style/*.css",
"css/*.css"
],
功能增强：Zignd.html-css-class-completion
开启服务器:安装插件ritwickdey.LiveServer
自动运行代码： formulahendry.code-runner
自动转模板字符串
插件meganrogge.template-string-converter
const name = "Tom"
const str = "My name is "
// 让str拼上name
const str = `My name is ${name}`
该插件自动将引号变为反引号，指定文件类型template-string-converter.validLanguages
设置主题
自己选择
monokai.theme-monokai-pro-vscode
zhuangtongfa.material-theme
teabyii.ayu
Equinusocio.vsc-material-theme
代码块突出显示:editor.guides.bracketPairs（青色的线）
多行代码合并成一行：按键设置 > 合并行 推荐快捷键Ctrl+Shift+J
选中代码块
按下快捷键
代码片段工具
Window:massCode | A free and open source code snippets manager for developers
Mac:SnippetsLab - Keep Your Code At Your Fingertips (renfei.org)
设置文件图标
安装扩展vscode-icons,启用图标
在C:\Users<user_home>\AppData\Roaming\Code\User\下创建vsicons-custom-icons文件夹
将图标放到创建的文件夹下
folder_type_<icon-name>.svg folder_type_<icon-name>-opened.svg
"vsicons.associations.folders": [
{
"icon": "my-store-icon", // icon-name
"extensions": ["store", "stores"], // 当文件夹的名字匹配时
"format": "svg" // 图片格式
}
]
TailWind专题
启动命令
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
去除警告
@tailwind base;
@tailwind components;
@tailwind utilities;
上面三行出现警告，解决方案：css.lint.unknownAtRules设置为ignore
类名折叠
安装插件Tailwind Fold,启用tailwind-fold.autoFold
自动编译Less
安装插件Easy LESS,全局安装lessnpm install -g less
"less.compile": {
"out": "${workspaceRoot}\css\"
},
工程化
显示依赖包大小:wix.vscode-import-cost
