木灵鱼儿
阅读:2146
分享一个vscode的配置 vue开发用的
安装的插件
- Atom One Dark Theme 主题
- Auto Rename Tag 头尾标签自动修改,改一个改一双
- Beautify 格式化
- Bracket Pair Colorizer 对象括号选择有颜色表示范围
- Highlight Matching Tag 选择标签自动高亮对应的结尾标签
- Material Icon Theme 图标
- Path Intellisense 路径提示,只能相对路径
- Version Lens 版本提示,安装完可以在打开package.json文件,在右上角有一个v按钮,点击可以查看最新版本,更新狂魔必备
- Vetur 用了vue还有不装这个的?
- Color Highlight 颜色预览
- koroFileHeader 注释工具
- GitLens 在文件中可以查看该代码最后谁更新的
- JavaScript (ES6) code snippets es6的快捷命令
- Live Server 小型服务器环境运行html
- Local History 每次ctrl+s就会做一次记录,可以防止意外发生回退代码
- Lodash
- Tabnine ai智能代码提示
- Vue VSCode Snippets vue的快捷代码
配置
{
"workbench.iconTheme": "material-icon-theme",
"editor.fontSize": 16,
"editor.tabSize": 2,
"editor.fontFamily": "'JetBrains Mono','Cascadia Code',Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"compile-hero.config": "",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"settingsSync.ignoredExtensions": [],
"beautify.config": {
"brace_style": "collapse,preserve-inline",
"indent_size": 2,
},
"javascript.suggest.autoImports": false,
"vetur.validation.template": false,
"compile-hero.jade-output-toggle": false,
"compile-hero.javascript-output-toggle": false,
"compile-hero.less-output-toggle": false,
"compile-hero.sass-output-toggle": false,
"compile-hero.pug-output-toggle": false,
"compile-hero.scss-output-toggle": false,
"compile-hero.typescript-output-toggle": false,
"compile-hero.typescriptx-output-toggle": false,
"git.autofetch": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 110,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
"editor.codeActionsOnSave": {},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"beautify.language": {
"js": {
"type": [
"javascript",
"json",
"jsonc"
],
"filename": [
".jshintrc",
".jsbeautifyrc"
]
},
"css": [
"css",
"less",
"scss"
],
"html": [
"htm",
"html"
]
},
"editor.wordWrap": "on",
"files.associations": {
"*.tpl": "html",
"*.vue": "vue"
},
"editor.renderControlCharacters": false,
"files.autoSave": "off",
"diffEditor.ignoreTrimWhitespace": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"search.followSymlinks": false,
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"eslint.codeAction.disableRuleComment": {
"vue/html-indent": "false",
"vue/html-closing-bracket-newline": "false"
},
"explorer.confirmDelete": false,
// 插件配置项
"fileheader.configObj": {
"autoAdd": false, // 检测文件没有头部注释,自动添加文件头部注释
"autoAddLine": 100, // 文件超过多少行数 不再自动添加头部注释
"autoAlready": true, // 只添加插件支持的语言以及用户通过`language`选项自定义的注释
// 自动添加头部注释黑名单
"prohibitAutoAdd": [
"json",
"php"
],
"prohibitItemAutoAdd": [
"项目的全称禁止项目自动添加头部注释, 使用快捷键自行添加"
],
"wideSame": false, // 头部注释等宽设置
"wideNum": 13, // 头部注释字段长度 默认为13
// 头部注释第几行插入
"headInsertLine": {
"php": 2 // php文件 插入到第二行
},
"beforeAnnotation": {}, // 头部注释之前插入内容
"afterAnnotation": {}, // 头部注释之后插入内容
"specialOptions": {}, // 特殊字段自定义
"switch": {
"newlineAddAnnotation": true // 默认遇到换行符(\r\n \n \r)添加注释符号
},
"moveCursor": true, // 自动移动光标到Description所在行
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"atSymbol": "@", // 更改所有文件的自定义注释中的@符号
"atSymbolObj": {}, // 更改单独语言/文件的@
"colon": ": ", // 更改所有文件的注释冒号
"colonObj": {}, // 更改单独语言/文件的冒号
"filePathColon": "路径分隔符替换", // 默认值: mac: / window是: \
"showErrorMessage": false, // 是否显示插件错误通知 用于debugger
"CheckFileChange": false, // 单个文件保存时进行diff检查
"createHeader": true, // 新建文件自动添加头部注释
"useWorker": false, // 是否使用工作区设置
"designAddHead": false, // 添加注释图案时添加头部注释
// 自定义语言注释符号,覆盖插件的注释格式
"language": {
"java": {
"head": "/$$",
"middle": " $ @",
"end": " $/"
},
// 一次匹配多种文件后缀文件 不用重复设置
"h/hpp/cpp": {
"head": "/*** ", // 统一增加几个*号
"middle": " * @",
"end": " */"
},
// 针对有特殊要求的文件如:test.blade.php
"blade.php": {
"head": "<!--",
"middle": " * @",
"end": "-->"
}
},
// 默认注释 没有匹配到注释符号的时候使用。
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": false
}
},
// 头部注释
"fileheader.customMade": {
// 头部注释默认字段
"Author": "mulingyuer",
"Date": "Do not edit", // 设置后默认设置文件生成时间
"LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间
"LastEditors": "mulingyuer", // 设置后,保存文件更改默认更新最后编辑人
"Description": "",
"FilePath": "Do not edit", // 设置后,默认生成文件相对于项目的路径
"custom_string_obkoro1": "怎么可能会有bug!!!"
},
// 函数注释
"fileheader.cursorMode": {
// 默认字段
"description": "",
"param": "",
"Date": "YYYY-MM-DD HH:mm", // 设置后默认设置文件生成时间
"Author": "mulingyuer"
},
"projectManager.git.maxDepthRecursion": 0,
"projectManager.any.baseFolders": [
"E:\\Code\\shetuan"
],
"git.enableSmartCommit": true,
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"tabnine.experimentalAutoImports": true,
"workbench.colorTheme": "Atom One Dark",
"security.workspace.trust.untrustedFiles": "open",
"[jsonc]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"local-history.daysLimit": 1,
}
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vscode 隐藏.meta文件
前言.meta文件是cocos自己的配置文件,用于标识每个文件的,在开发过程中不用关心这个文件,但是通过vscode打开cocos项目会将.meta和ts这些文件全部显示在一起,非常影响开发,得想办法忽略显示这个文件。教程在vscode设置里搜索:files,找到Files:Exclude,添加一个新的规则:**/*.meta保存即可。如果不想可视化,可以打开vscode的json配置文件,填入以下内容:{ "files.exclude": { "**/*.meta": true } }保存也是一样的。

vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vscode ssh远程开发与腾讯云TencentOS系统部署教程
简介vscode通过ssh连接云服务器进行开发,服务器通过宝塔面板来进行可视化管理。系统采用腾讯维护的TencentOS Server,也就是centos的第三方维护版本。代码同步则使用git进行处理。[hide]服务器部署服务器部署相对简单。安装 TencentOS Server腾讯云里面有一台vps服务器,自己选择安装TencentOS Server 3.1版本,然后进行重装。安装宝塔宝塔官网:宝塔安装简单,自己ssh连接后安装即可,使用centos的安装链接。创建并绑定密匙在腾讯云管理页面左侧的菜单栏中找到密匙;这个密匙是用于ssh连接的,如果你懂ssh密匙链接,其实也可以跳过,只...

vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...