Hades

VSCode使用记录

快捷键

  • 自动提示代码快捷键

    Ctrl+i

  • 快速定位文件位置

    Cmd + Shift + E

安装插件记录

  • Chinese (Simplified) (简体中文) Language 简体中文
  • any-rule 正则表达式
  • One Dark Pro 主题
  • open in browser 在浏览器打开
  • Vetur：是一个专为 Vue.js 开发而设计的插件，提供了代码高亮、智能感知、错误检查、格式化等功能，适用于Vue2

使用技巧

自动补全导入的vue，vue名称+Tab ，进入设置，搜索trigger on tab勾选 Trigger Expansion On Tab

image-20240306195642230

VSCode自动部署指定目录源码

由于我在学习阶段，创建了一个vue项目，目录下包含很多要学习的vue代码，不想每次都创建新的vue项目，只想复用src目录下的源码，也不想每次都通过替换src下的文件，于是，我通过修改默认源码位置，和文件监听，实现自动化部署。

image-20240307164933779

1. vue修改默认的源码目录

找到项目下的vue.config.js文件，在里面添加如下内容

const { defineConfig } = require('@vue/cli-service')

const path = require('path')  //导入path
// 定义一个变量，用来存储要学习的文件夹
let appModule = 'src'
appModule = '05-props校验'
appModule = '07-小黑记事本'
module.exports = defineConfig({
  transpileDependencies: true,
  // 修改源代码目录
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, `./${appModule}`) // 设置路径别名
      }
    }
  },
  chainWebpack: config => {
    // 修改入口文件
    config.entry('app')
      .clear()  //  清除历史编译文件
      .add(`./${appModule}/main.js`) // 假设入口文件为 main.js
      .end()
  }
})

2. 安装nodemon 工具

yarn 进行安装

yarn global add nodemon

在项目的根目录下创建一个 nodemon.json 文件，并在其中添加如下配置

{
  "watch": ["vue.config.js"],
  "exec": "yarn server"
}

最后，在终端中进入到项目根目录，运行以下命令启动 nodemon，就不用使用yarn server启动服务了。

现在，nodemon 将会监视 vue.config.js 文件的更改，只要修改appModule即可，并在文件更改保存时，自动重新运行开发服务器。这样，无需手动操作。

注意：存在一个问题，只要vue.config.js，随便动一下代码，就会重启服务，体验非常不好。

3. 取消vue.config.js自动保存

方法一：进入VSCode设置，搜索自动保存，选择当窗口变化，在保存，适用于全部文件。

方法二：进入VSCode设置，搜索排除，找到Watcher Exclude，添加vue.config.js精准排除

image-20240307165338600

这样只要修改了vue.config.js文件，按住Ctrl+S保存才会重启服务。

Loading...