建设部网站查造价师,网站建设纪念币发售,企业活动网站创意案例,两学一做材料上哪个网站找一、快速生成页面骨架
文件 首选项 配置用户代码片段
选择需要的代码片段或者创建一个新的#xff0c;这里以 vue.json 举例#xff1a; 下面为我配置的代码片段#xff0c;仅供参考#xff1a;
{Print to console: {prefix: 首选项 配置用户代码片段
选择需要的代码片段或者创建一个新的这里以 vue.json 举例 下面为我配置的代码片段仅供参考
{Print to console: {prefix: vue,body: [script,export default {, data() {, return {}, },, computed: {},, methods: {},},/script,,template, div class$1/div,/template,,style langscss scoped,,/style,],description: Log output to console}
}二、格式化配置
这一块有很多配置就不一一介绍了直接放上配置项并加上注释自己选择需要的去配置以下是我个人的配置习惯
settings.json
{// 编辑器配置workbench.colorTheme: Atom One Dark,workbench.iconTheme: vscode-icons,editor.fontSize: 15,editor.links: false,editor.detectIndentation: true,editor.formatOnSave: true,editor.codeActionsOnSave: {source.fixAll.eslint: true},// eslint 配置eslint.validate: [javascript, javascriptreact, vue],// vue 格式化程序[vue]: {editor.defaultFormatter: octref.vetur // 使用 vetur 替换默认格式化},// 配置 vetur 格式化规则vetur.format.defaultFormatter.html: js-beautify-html,vetur.format.defaultFormatter.js: vscode-typescript,vetur.format.options.tabSize: 2,vetur.format.defaultFormatterOptions: {js-beautify-html: {wrap_attributes: auto // html 标签自动换行这样设置不会频繁换行}},// js 格式化程序[javascript]: {editor.defaultFormatter: vscode.typescript-language-features},// json 格式化程序[jsonc]: {editor.defaultFormatter: esbenp.prettier-vscode}
}
三、界面美化配置
1. 取消默认链接显示下划线 这种密密麻麻的下划线看着是不是很难受取消这个配置即可隐藏它。
文件 首选项 设置 中找到 Links 配置取消它即可。 2. 取消标签频繁换行
明明很短的标签一行就可以显示但是格式化后却频频换行看着是不是别扭别着急按照下面的配置轻松搞定它。
安装 Vetur 插件注意版本号有些最新的版本可能会出现莫名其妙的bug如果遇到了卸载后安装低版本即可我安装的是 v0.36.1 版本未遇到 bug打开设置的 json 文件在里面进行编辑打开方法和配置如下 [vue]: {editor.defaultFormatter: octref.vetur // 使用vetur取代vscode默认配置},vetur.format.defaultFormatterOptions: {js-beautify-html: {wrap_attributes: auto},},
