青岛福瀛建设集团有限公司网站,icp备案网站名称是什么意思,网站设计制作一条龙多少钱,手机网站 设置一、常用插件
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
vscode 中文插件
Auto Rename Tag
闭合标签
Path Intellisense
一个非常实用的工具#xff0c;它提供了文件路径的自动补全功能#xff0c;可以极大地提高开发效率。路径自动补全、…一、常用插件
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
vscode 中文插件
Auto Rename Tag
闭合标签
Path Intellisense
一个非常实用的工具它提供了文件路径的自动补全功能可以极大地提高开发效率。路径自动补全、智能感知、支持自定义配置settings.json
Project Manager
专为提升项目管理效率而设计的工具左侧项目可以搜索目录。
添加项目到管理器 打开需要管理的项目文件夹。按下快捷键Windows/Linux上是CtrlShiftPmacOS上是CommandShiftP打开命令面板。输入“Project Manager: Save Project”并选择该命令将当前项目保存到Project Manager中。重复上述步骤将更多项目添加到管理器中。 快速切换项目 点击VSCode左侧边栏中的“Project Manager”图标如果未显示可能需要通过点击侧边栏底部的“…”按钮找到并启用它。在项目管理器中选择要切换的项目点击即可打开该项目。 管理项目 在项目管理器中用户可以查看所有已保存的项目并为它们添加或删除标签。通过搜索功能用户可以快速找到特定的项目。
project-tree
Project-Tree是一个实用的工具它可以帮助用户快速生成并查看项目的目录结构。
Prettier - Code formatter 格式化
一款非常受欢迎的代码格式化工具它主要用于自动调整代码文件的编码风格确保代码的统一性和可读性。 // 根据需要配置这里只放一点示例 setting.jsonprettier.requireConfig: false,prettier.bracketSameLine: false, // 在jsx中把 是否单独放一行prettier.endOfLine: auto,// #让prettier使用eslint的代码格式进行校验// prettier.eslintIntegration: true,// #去掉代码结尾的分号prettier.semi: false,// #使用带引号替代双引号prettier.singleQuote: true,Prettier ESLint 格式化
用于使用更漂亮的eslint包格式化JavaScript和TypeScript代码。
editor.wordWrap: on,// yss-config-starteditor.tabCompletion: on,search.quickOpen.includeSymbols: true,editor.suggest.localityBonus: true,editor.suggest.shareSuggestSelections: true,cSpell.language: en,en-US,en-GB,editor.defaultFormatter: esbenp.prettier-vscode,// editor.formatOnSave: true,// yss-config-end// #每次保存的时候将代码按eslint格式进行修复editor.codeActionsOnSave: {source.fixAll: false,source.fixAll.eslint: true},ESLint
它可以帮助开发者在编写代码时自动检查代码质量并遵循一定的编码规范。 在设置搜索框中输入“eslint”找到与ESLint相关的设置项。 根据你的需求配置这些设置项例如启用ESLinteslint.enable、设置ESLint的运行模式eslint.run、指定要验证的文件类型eslint.validate等。 配置完成后ESLint将自动在VS Code中工作。当你编写代码时ESLint会检查你的代码是否符合配置的规则并在代码编辑器中显示警告或错误。
Live Server
为前端开发提供一个实时的本地开发服务器以便开发者能够实时预览和调试网页应用程序。
// live-server 配置代理 修改代理之后,记得重启VSCODEliveServer.settings.proxy: {enable: false,// 代号,代理地址,发请求拼接的地址baseUri: /api,// 真正后台服务器的基地址proxyUri: 192.168.78.187},open in browser
允许开发者在VSCode中直接通过默认浏览器或其他指定浏览器打开HTML、CSS、JavaScript等文件从而快速预览网页效果无需手动在浏览器中打开文件。 使用方法
右键点击文件在VSCode中打开HTML文件右键点击该文件。选择打开方式在上下文菜单中选择“在浏览器中打开”或具体浏览器的选项如“在默认浏览器中打开”、“在Chrome中打开”等。预览网页所选浏览器将自动打开并显示HTML文件的内容开发者可以预览网页效果。此外也可以使用快捷键来打开浏览器如CtrlAltBWindows/Linux或CmdAltBMac OS。但请注意使用快捷键时必须已选中相应的HTML文件否则可能会导致错误。
Simple icons
文件目录图标
Quokka.js
Quokka.js是一个JavaScript和TypeScript的开发工具它可以在编辑器中以实时方式运行、评估和测试你的代码。 可以通过注释实时生成代码 使用文章 使用方法:
创建Quokka文件安装后你可以通过快捷键如CtrlShiftP或CommandShiftP然后输入Quokka并选择“New JavaScript File”或“New TypeScript File”来创建新的Quokka文件。编写代码在Quokka文件中编写你的JavaScript或TypeScript代码并使用console.log、标示表达式等来查看结果。查看结果代码将实时运行并在编辑器中显示结果。你可以通过Value Explorer等功能来进一步查看和管理输出。
String Manipulation
它提供了丰富的字符串处理功能如大小写转换、格式化、排序等极大地提高了开发者在编写和编辑代码时的效率。
Sublime Text Keymap and Settings Importer
可以使用 sublime 编辑器语法
JavaScript (ES6) code snippets
提供ES6语法支持 快速插入代码片段 提升编码速度 使用统一的代码片段和模板有助于保持代码风格的一致性增强代码的可读性。
JavaScript Booster
JavaScript Booster提供了一系列优化功能帮助开发人员优化代码提高执行速度减少资源消耗。 它能够识别并建议改进代码中的不合理部分如变量声明建议使用const或let代替var、不必要的else语句等从而提升代码质量。 实时反馈在编写代码的过程中JavaScript Booster会实时分析代码并在发现潜在问题时给出反馈。
Jest
Jest的主要作用是为JavaScript开发者提供对Jest测试框架的集成和支持从而提升测试编写的效率和体验。
Jest Runner
Jest Runner允许开发者在VSCode中直接对单个测试或测试套件进行运行或调试无需通过命令行手动执行。 当测试失败时Jest Runner能够即时显示测试结果并帮助开发者快速定位到出错的测试代码从而加快问题修复的速度。 Jest Runner支持多种交互方式如通过上下文菜单、CodeLens代码透视镜和命令面板执行测试。这种灵活性使得开发者可以根据自己的习惯选择最适合的测试执行方式。
background
背景图案 需要在setting设置
//背景图片background.enabled: true,// background.useDefault: false,background.customImages: [// 替换成你的地址file:///C:/Users/用户名/Pictures/vscode-img/03.jpg,file:///C:/Users/用户名/Pictures/vscode-img/02.jpg,],background.style: {// content: ‘‘,pointer-events: none,position: absolute,z-index: 99999,width: 100%,height: 100%,background-position: center,background-repeat: no-repeat,background-size: cover,opacity: 0.1},Bookmarks
通过提供书签功能帮助开发者在复杂的代码文件中快速定位和跳转。
REST Client
REST-Client是一个强大的HTTP客户端扩展它允许开发者直接在VSCode编辑器中发送HTTP请求并查看响应。 使用方法
创建请求文件在VSCode中创建一个以.http或.rest为扩展名的文件用于编写HTTP请求。编写请求在请求文件中按照REST-Client的语法编写HTTP请求。例如一个GET请求可以写成GET https://httpbin.org/get。发送请求在请求文件中点击“Send Request”按钮或使用快捷键Win: CtrlAltRmacOS: CmdAltR发送请求。查看响应发送请求后在请求文件下方会展示响应结果。 Browser Lite
Kenneth Auchenberg的浏览器预览版 ⚡️ 更快的页面刷新 暗模式感知 主题感知UI 内置devtools支持 可扩展操作 在系统浏览器中重新打开 ✅ 无遥测 更轻10.3MB➡️ 212KB
二、Git必备
Git Graph
可视化Git仓库状态安装后在底部可以看到 Git Graph 直接点击
分支和提交历史Git Graph通过图形界面展示了Git仓库中所有分支的图形表示以及每个提交的节点使得开发者可以直观地看到分支结构和提交历史。放大缩小与拖动用户可以使用鼠标滚轮放大缩小图像或使用鼠标拖动图像来查看不同的区域。
GitHub Repositories
通过GitHub Repositories插件开发者可以直接在VSCode中浏览GitHub上的仓库列表无需切换到浏览器。 插件能够展示仓库的提交历史帮助开发者了解项目的变更情况。 支持创建、切换、合并分支等操作方便开发者进行分支管理。
GitLens — Git supercharged
GitLens可以在编辑器中显示当前代码行的作者、最后修改时间、修改次数等信息帮助开发者更好地了解代码的编写历史和质量。还能提供当前代码行与其他代码行的关联性方便复查某个函数或对象的调用情况。
Remote Repositories
Remote Repositories扩展与GitHub Repositories和Azure Repos扩展集成允许您直接从Visual Studio Code中快速浏览、搜索、编辑和提交到远程git存储库。 此扩展以前是GitHub Repositories扩展的一部分。
三、智能GPT
ChatGPT GPT-4 - Bito AI Code Assistant
一款基于GPT-4和GPT Turbo 3.5模型的顶级AI代码助手和开发者辅助工具。该插件提供了智能、快速的AI代码生成、测试创建、代码编辑、代码解释等功能旨在提升开发者的编码效率和体验。
CodeGeeX: AI Code AutoComplete, Chat, Auto Comment
CodeGeeX是一款基于大模型的智能编程助手它可以实现代码的生成与补全自动为代码添加注释不同编程语言的代码间实现互译针对技术和代码问题的智能问答当然还包括代码解释生成单元测试实现代码审查修复代码bug等非常丰富的功能。
TONGYI Lingma通义灵码
一款基于通义大模型的智能编码辅助工具旨在为开发者提供高效、流畅的编码体验。 实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查。
四、VUE相关
Vue 3 Snippets
一款专为Vue 3开发者设计的扩展插件旨在提高Vue 3代码的编写效率和质量。 智能代码提示、语法高亮与智能感知、支持Composition API
vue3-snippets-for-vscode可能不完全适用于 vue2
这是一个适配 Vue3 Api 的 snippets 插件
新增特性: 支持快速 console.log方便调试
Vue Language Features (Volar)
Volar是一个基于TypeScript的Vue语言服务它提供了Vue 3的官方支持包括语法高亮、智能感知、类型检查等功能。 虽然Volar主要侧重于语言服务和类型检查但它也可能包含一些Vue 3的代码片段或与其他代码片段插件兼容。 语法高亮、智能感知、代码格式化、错误检查 类型检查Volar支持Vue 3的TypeScript类型检查能够确保代码的类型正确性提高代码质量
Vue Extension Box
vue项目扩展包 Vue Official Auto Close Auto Rename ESLint Sass SCSS Formatter Prettier
Vue Peek
Vue Peek是一个专为Vue.js开发者设计的VSCode插件。实时预览、快速编辑、提高开发效率、支持多种组件格式、便捷导航。
使用Vue Peek命令按下快捷键默认为CtrlShiftP或CmdShiftP打开命令面板输入“Vue Peek”并选择相应的命令。例如选择“Vue Peek: Peek Current Vue Component”来预览当前Vue组件。预览和编辑组件Vue Peek将在VSCode中打开一个新的面板显示组件的实时预览。开发者可以直接在这个面板中编辑组件并看到更改效果。
Vue VSCode Snippets
提供了Vue.js的代码片段帮助开发者快速编写Vue组件和模板。这些代码片段覆盖了Vue的常见用法如组件定义、生命周期钩子、指令等。
Vite
打开项目后立即启动开发服务器 无需离开编辑器即可预览/调试您的应用程序 ⬢ 打开新项目时提示快速安装节点模块npm i yarn pnpm i 一键构建和服务 一键重启服务器 支持VitePress 由Browse Lite提供技术支持
Vetur虽然主要面向Vue 2但也可能包含Vue 3的支持
Vetur是一个全面的Vue.js开发工具集包括语法高亮、智能提示、Emmet、Linting、格式化、Sass/Less支持等功能。它极大地提高了Vue.js开发的效率和质量。
五、React相关
ES7 React/Redux/React-Native snippets
提供React、Redux和React Native相关的代码片段包括组件声明、状态管理、路由配置等常用模板。支持ES7语法
Simple React Snippets
专为React开发者设计的插件它能够通过简单的快捷键或缩写快速生成React相关的代码片段从而大幅提高开发效率。
快捷键描述示例代码imrc导入React和Componentimport React, { Component } from ‘react’;impt导入PropTypesimport PropTypes from ‘prop-types’;cdm快速生成componentDidMount生命周期方法componentDidMount() {}cdu快速生成componentDidUpdate生命周期方法componentDidUpdate(prevProps, prevState) {}ss快速生成setState调用使用对象语法this.setState({ key: value });ssf快速生成setState调用使用函数语法this.setState(prevState ({ key: prevState.key 1 }));ren快速生成render方法框架需要在Class Component内部使用render() { return (/* 渲染内容 */); }
六、Angular相关
Angular Files
右键快速构建组件文件
Angular Language Service
由Angular团队官方开发。提供了丰富的语法提示、代码补全、错误检查等功能旨在帮助开发人员更快地编写Angular代码。在编写Angular模板时Angular Language Service能够快速提供可能的属性、指令和事件的补全建议显著提升编码效率。
Angular Snippets (Version 18) 允许开发者在VSCode中输入这些缩写并按Tab键时自动展开为完整的Angular代码结构。 支持快速创建组件如输入ngc并按Tab键、指令如ngd和服务如ngsvc等。
七、移动端
px to rem rpx vw (cssrem)
它可以帮助开发者在编写CSS时将像素单位px自动转换为相对单位rem、rpx、vw等这对于实现响应式布局和适配不同屏幕尺寸的设备尤为重要。 // VSCODE px转rem工具 搜索cssrem// css2rem// 默认大小cssrem.rootFontSize: 20,// 小数点后位数cssrem.fixedDigits: 6,// 除0开头的前缀cssrem.autoRemovePrefixZero: true,WXML - Language Service
用于小程序开发。提供一键创建小程序组件标签名与属性自动补全根据组件已有的属性自动筛选出对应支持的属性集合 属性值自动补全…
八、UI框架
Element UI Snippets
饿了么UI使用语法标签提示
vscode-element-helper
它主要针对 Element-UI 框架提供了一系列便捷的开发辅助功能。
九、其他
FreeMarker
帮助开发者在编写FreeMarker模板.ftl文件时获得更好的编辑体验包括语法高亮、代码片段、错误检查等功能。
NGINX Configuration Language Support
它通过提供语法高亮、自动补全、提示和错误检查等功能极大地提升了开发者在处理nginx配置文件时的效率和体验。
十、CSS less、scss
Sass (.sass only)
缩进Sass语法高亮显示、自动补全和VSCode格式化工具
SCSS Formatter
主要用于格式化SCSSSassy CSS代码使其更加整洁、规范提高代码的可读性和可维护性。 使用方法
打开一个SCSS文件。使用快捷键ShiftAltFWindows/Linux或ShiftOptionFmacOS来格式化整个文档。或者你可以右键点击编辑器中的空白处选择“格式化文档”Format Document来格式化当前文件。如果你只想格式化文件中的一部分代码可以先选中这部分代码然后使用上述快捷键或右键菜单中的“格式化选定内容”Format Selection选项。
Easy LESS
每次保存.less文件时都会生成一个.css文件。 例如styles.less–styles.css
上面对照自己使用vscode做了规整如有不对欢迎指正。有好用的插件也欢迎补充
