打造vuers最好用的vscode

·  阅读 4689

一款好用的IDE能让你提升编码效率,所谓磨刀不误砍柴工,那么vuers该如何配置vscode,才能将你开发效率最大化,可以省下很多时间去做喜欢的事情

下面将一步一步教你打造成最好用的vscode,假如你和我一样,是个懒到极致的人,你可以跳过以下部分,直接使用我的配置同步vscode,那么经过傻瓜式的设置同步,你就可以体验完整的配置

配置语言

从官网下载vscode后,安装打开,提示要安装中文语言包,按照提示安装重启,界面就变成中文界面了

vue技术栈,所以还要针对vue语法做识别,这里推荐按照Vetur作为语言识别引擎,提供语法识别,格式化,相关提示

主题

界面主题使用Copilot Theme,界面风格非常nice,ai编程风格,让你写代码更省心

图标显示使用[Material Icon Theme](Material Icon Theme - Visual Studio Marketplace),文件图标非常齐全,搭配Copilot Theme非常好看

typescript.png

配置格式化

安装eslint扩展

安装Vetur扩展

一般项目都是推荐使用eslint统一源码格式,所以还要对vuter进行eslint的适配

按照eslint扩展提示,要正常使用eslint,还要全局安装eslint

npm install -g eslint 
复制代码

使用自定义配置进行格式化,以下是我的vscode自定义设置

{
  // lint 配置
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  },
}

复制代码

每次进行保存的时候都会进行格式化,解放劳动力

常用插件

  • auto-close-tag 自动增加闭合标签
  • auto-complete-tag 自动提示完成标签
  • auto-rename-tag 改标签名的时候,自动更改闭合标签名
  • codeif 变量命名神器,命名的时候可以先写注释,然后对中文右键进行codeif参考网络中流行的命名
  • code-runner 代码执行器,可以在vscode中执行多种语言脚本,输出到控制台中
  • code-settings-sync 设置同步,对于管理共享整个团队的vscode设置挺有用的
  • codestream 代码审查工具,可以对提交代码进行review,也可以对整个项目进行review remark,提升团队代码质量的好帮手
  • copilot github ai代码助手,可以根据语法上下文智能提示,非常好用,目前内测阶段,需要通过邮箱申请开通授权
  • cssrem 一个CSS值转REM的VSCode插件
  • dotenv .env 文件的语法着色
  • EditorConfig .editorconfig 文件语法着色
  • filesize 计算源码文件大小,并显示在左下角
  • githistory 查看git历史记录
  • GitLens git历史查看,提交记录查看,历史比较,版本回滚,神器不解析
  • Import Cost 计算import引入的文件大小
  • highlight-matching-tag 高亮html匹配标签,让你更清楚标签的闭合对应关系
  • indent-rainbow 彩虹缩进,让你更清楚看到缩进层级关系
  • IntelliSense for CSS class names in HTML class根据工作空间中找到的定义或通过link元素引用的外部文件,为HTML 属性提供CSS类名称完成。
  • Live Server 提供对HTML的即时服务预览,代码改动即时刷新
  • Path Intellisense 路径引入智能感知
  • npm-intellisense npm module 引入智能感知
  • Version Lens npm version检测
  • vscode-fileheader 生成文档注释头
  • vscode-versionlens 查看当前package.json依赖包的版本情况,方便做版本更新
  • CSS Navigation 支持ctrl跳转查看class的定义
  • html-slim-scss-css-class-completion class提示,能扫描你工程的class定义,生成索引,在编写class时候自动提示

配置同步

如果你觉得需要一步一步配置以上设置和安装扩展很麻烦,你也可以通过同步我的扩展,更简单的享受到配置好的vscode

步骤1:安装 Settings Sync 插件

步骤2:ctrl + shift/cmd + p 打开设置页面,输入sync

步骤3:选择 Sync 高级选项,选择 打开设置

步骤4: 在Settings Sync 配置面板,填入 Gist ID :1e774801956fbf0bb71a84c4b1bc958e ,并把其余配置按图打开

步骤5:ctrl + shift/cmd + p 打开设置页面,输入sync,选择 下载配置,进行同步

如果你是开发小程序,推荐使用vue语法的PIUI 高质量开源组件库,配合class语法提示,让你效率更上一个台阶

分类:
前端
收藏成功!
已添加到「」, 点击更改