tml开发环境搭建

有一个好的编辑器我们可以方便地的开发项目，编写代码，配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。

基于html项目的开发和代码编写现在网上有很多编辑器，也有免费的，也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本，我们可以使用记事本编辑html代码。

使用记事本编写html的步骤是首先新建一个文本文档，按照html的语法规则编写相关的代码和保存文件，然后把文件的后缀名改为.html，使用电脑上的浏览器打开就可以查看我们代码的运行结果。

虽然记事本也能编写html代码，但是效率不高也不方便，所以我们使用专业的编辑器来开发项目，编写代码和管理项目。

常用html代码编写的免费软件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官网下载地址：

https://www.dcloud.io/hbuilderx.html

vs code的官网下载地址：

https://code.visualstudio.com/

Sublime Text官网下载地址：

http://www.sublimetext.com/

我们以后的教程都使用HBuilderX，所以下面为了同学们的学习方便，对HBuilderX的下载和安装做详细的教程。

一，下载

首先访问HBuilderX的官网网址：

https://www.dcloud.io/hbuilderx.html

打开上面的HBuilderX下载网址后点击页面上download，在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。

在Windows10环境下下载后的文件是一个压缩的.zip文件。

二，安装

鼠标右击下载下来的压缩文件进行解压。

解压完成后是一个名为HBuilderX的文件夹。

解压完成后鼠标双击HBuilderX文件夹：

双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器：

因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序，我们可以右击HBuilderX.exe文件创建桌面快捷方式。

小百科：

绿色软件指一类小型软件，多数为免费软件，最大特点是软件无需安装便可使用，可存放于闪存中，移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装，下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值，所以相对一般的软件来说，绿色软件对系统的影响几乎没有，所以是很好的一种软件类型。

三，新建项目

HBuilderX编辑器初次启动时的默认界面是下图所示：

按照下图所示可以创建一个新的名为demo1空白项目：

名为demo1的空白项目创建成功后的界面如下图所示：

接下来在刚我们新建的demo1项目下创建名为helloworld的html文件

鼠标右击创建的demo1项目选择新建在选择.html文件：

在弹出的对话框里填入html文件的名称：

编写一段代码：

运行：

在浏览器上观察效果：

好了，到这里html的开发环境搭建和HBuilderX的安装教程结束了。

下面再给大家教一下怎样修改HBuilderX的主题风格，HBuilderX自身提供了修改软件主题的功能，使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。

按照以下步骤可以修改HBuilderX的主题，默认主题是绿柔，我们可以改成雅黑，雅蓝或者自定义主题：

雅黑主题：

雅蓝主题：

好了本节全部内容全部结束了，希望我准备的内容对你有所帮助

你的支持是我的最大动力，若觉得我的教程还可以或对你有帮助为我点赞加关注！谢谢！

《vite+vue3实现网页版编辑器，带高亮以及代码提示（以SQL语言为例）》

### 引言：拥抱现代前端开发工具与框架

随着Web技术的飞速发展，构建高效、功能丰富的网页应用变得越来越便捷。Vite作为一款由尤雨溪亲自操刀的新一代前端构建工具，以其闪电般的启动速度和对Vue3的深度优化赢得了开发者们的青睐。而Vue3作为当下热门的前端框架，其响应式系统、Composition API等特性更是大大提升了开发效率。今天，我们将利用Vite+Vue3这一黄金组合，手把手教你打造一个支持SQL语法高亮显示及智能提示的网页版编辑器。

### 第一部分：搭建项目环境与基础架构

**步骤一：初始化项目**

首先，我们需要通过Vite来创建一个新的Vue3项目：

```bash

npm create vite@latest my-sql-editor --template vue

cd my-sql-editor

npm install

```

**步骤二：引入代码编辑器组件**

为了实现代码编辑功能，我们可以使用如Monaco Editor这样的强大开源组件。在项目中安装它：

```bash

npm install monaco-editor @vitejs/plugin-vue-jsx

```

并在`vite.config.js`中引入相关插件：

```javascript

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({

plugins: [vue(), vueJsx()],

optimizeDeps: {

include: ['monaco-editor']

}

});

```

### 第二部分：配置与实现SQL代码编辑器

**步骤三：编写SQL编辑器组件**

在`src/components`目录下新建`SqlEditor.vue`文件，引入并初始化Monaco Editor：

```html

<template>

<div ref="editorContainer" style="width:100%; height:100%"></div>

</template>

<script>

import * as monaco from 'monaco-editor';

export default {

data() {

return {

editor: null,

};

},

mounted() {

this.initEditor();

},

methods: {

initEditor() {

const container = this.$refs.editorContainer;

monaco.editor.create(container, {

value: '',

language: 'sql', // 设置语言为SQL

automaticLayout: true,

}).then((editor) => {

this.editor = editor;

});

},

},

};

</script>

```

### 第三部分：实现SQL代码高亮与提示

**步骤四：加载SQL语言服务**

为了让Monaco Editor支持SQL的语法高亮和代码提示，我们需要引入相应的语言服务。由于Monaco默认并未集成SQL语言服务，可以借助社区提供的解决方案，例如`monaco-sql`：

```bash

npm install monaco-sql

```

然后，在初始化编辑器后加载SQL语言服务：

```javascript

import sqlLanguageService from 'monaco-sql';

// 在initEditor方法中添加以下代码

this.editor.onDidCreateModel((model) => {

monaco.languages.registerCompletionItemProvider('sql', {

provideCompletionItems: () => {

// 提供SQL代码提示逻辑...

},

});

monaco.languages.registerDefinitionProvider('sql', {

provideDefinition: () => {

// 提供SQL代码跳转逻辑...

},

});

monaco.languages.setLanguageConfiguration('sql', sqlLanguageService.configuration);

});

```

### 第四部分：定制SQL代码提示与高亮规则

**步骤五：实现SQL代码提示**

根据`monaco-sql`或其他你选择的语言服务库，实现具体SQL关键字、函数等的自动补全逻辑。这部分通常涉及对SQL语法规则的深入理解，并结合实际需求定制化。

**步骤六：完善SQL语法高亮**

同样地，基于提供的SQL语言服务，进一步调整和完善SQL语法的高亮显示规则，使其更加符合你的需求和审美。

### 结语：持续优化与拓展

至此，我们已经成功利用Vite+Vue3构建了一个初步具备SQL语法高亮与代码提示功能的网页版编辑器。然而，真实的开发过程中，我们还需要不断优化用户体验，比如增加错误提示、美化UI设计、处理SQL查询结果展示等功能。同时，对于其他编程或脚本语言的支持，只需替换对应的语言服务即可轻松实现。

希望这篇教程能帮助你开启Web前端开发的新篇章，更深入地掌握Vite+Vue3的应用实践，并在实战中提升技术水平。期待你在评论区分享你的实现过程和遇到的问题，让我们共同进步！