企业网站开发需求分析,最新招聘信息,网站首页图片大全,wordpress主题 产品展示vscode 常用扩展插件 常用插件部分插件使用技巧1、eslint 保存自动格式化2、代码片段的使用3、最后是关于引入文件路径提示的 常用插件
记录vscode方便开发的扩展插件#xff0c;方便换电脑时#xff0c;快速部署所需环境。
部分插件
1、Auto Close Tag html自动闭合标签插… vscode 常用扩展插件 常用插件部分插件使用技巧1、eslint 保存自动格式化2、代码片段的使用3、最后是关于引入文件路径提示的 常用插件
记录vscode方便开发的扩展插件方便换电脑时快速部署所需环境。
部分插件
1、Auto Close Tag html自动闭合标签插件,具体不再详述看插件介绍 2、Auto Rename Tag html 自动重命名标签插件谁用谁知道 3、Beautify 格式化插件 4、Chinese (Simplified) vscode 汉化插件—未使用 5、Code Runner 在编辑器里运行js代码同时可在terminal里显示打印结果的工具方便调试代码,支持多种语言比如 C, Python, Java等等 6、ES7 React/Redux/React-Native/JS snippets 通过指定的前缀快速生成react代码工具写一个例子详看插件介绍
imrcp tab →
import React, { Component } from react
import PropTypes from prop-types1、ESLint 代码检查工具,不再详述使用技巧里会分享eslint 保存格式化 2、Git History git 工具鼠标定位到代码行上可以在代码后边显示代码最近修改时间及修改人等信息 3、Git Project Manager git 项目管理工具 4、GitLens — Git supercharged git 工具作用和 Git History 类似 5、HTML Snippets 快速生成html代码工具 6、JS JSX Snippets 同上6通过快捷键快速生成react代码工具 7、LeetCode 力扣刷题神器没有梯子的注意把账号体系切换到国内账号就可以登录默认是连的国外账号 8、Live Server 快速启动一个本地服务方便html文件预览调试等 9、npm npm 依赖安装提示未安装的依赖会在依赖下显示波浪线提示 10、npm Intellisense 快速引入依赖插件详见插件介绍 11、Path Autocomplete 路径提示插件 12、Path Intellisense 同上路径补全插件 13、Prettier - Code formatter 代码格式化插件 14、Vetur vue 代码高亮插件,写vue必装神器 15、Visual Studio IntelliCode 代码智能补全插件这个不错大力推荐用了就知道 16、Vue Theme vue 代码主题插件 17、Vue VSCode Snippets 快速生成vue代码插件在下边的使用技巧里会分享高级使用技巧 18、微信小程序扩展 用vscode 开发小程序插件代码补全格式化等等 19、vscode wxml 提供 wxml 语法支持及代码片段和上一个类似 以上大部分插件是笔者用过的基本都是评价4.5和5星的插件在使用时有的插件功能重复建议大家一个功能选一个自己喜欢的安装太多的插件影响启动速度同时增加内存占用可能影响开发效率最终适得其反。
使用技巧
1、eslint 保存自动格式化
打开 文件 - 首选项 - 设置 - 点击任意一个 ‘在setting.json中编辑’, 打开配置文件添加一下代码就OK!
eslint.autoFixOnSave: true,eslint.validate: [javascript,javascriptreact,html,{language: vue,autoFix: true},typescript,typescriptreact]
2、代码片段的使用
通过代码片段可以用预定义快捷键快速生成自定的代码片段对于开发效率的提高很有裨益。打开 文件 - 首选项 - 用户代码片段 弹出菜单有 ‘新建全局代码片段文件’和 ‘新建项目代码片段’根据自己需要灵活选择 如下react代码片段供参考
{React template: {scope: javascript,jsx,prefix: irea,body: [import React, {Component} from react,,class $1 extends Component{, render () {, return (, , $2, /, ), },},,export default $1],description: react template}
}//其中的scope 是代码片段用于那些文件本例的用于js和jsx 文件prefix 是自定义的快捷键body是自定义的内容将会插到文件中$1 $2 等是光标的位置description 是代码片段的描述。3、最后是关于引入文件路径提示的
在开发时我们可能会通过webpack定义一些路径别名但是路径补全插件不认识这些路径别名所以在别名引入时就不能用了别着急我们可以通过配置插件的路径别名来达到目的。如下是我的Path Intellisense 插件配置供参考还是打开vscode配置 “setting.json” 文件,添加如下配置
path-intellisense.mappings: {: ${workspaceRoot}/src,components: ${workspaceRoot}/src/components,assets: ${workspaceRoot}/src/assets,util: ${workspaceRoot}/src/util,plugin: ${workspaceRoot}/src/plugin},PS: 需要注意的是这里配置的别名路径要和项目里配置的一一对应可以把配置文件修改放在项目配置里而不是全局配置。
