RQD-china / naive-editor

English | 简体中文

Introduction

Naive Editor is an open source online code editor demo based on the Monaco Editor component, based on the latest front-end technology stack, such as Vue3, Vite3, TypeScript, Pinia, Unocss and Naive UI. Features include copying code, copying selected code, formatting code in different styles, switching themes and more.

Features

• 🍒 Integrated Naive UI，recommended by Evan You.
• 🍎 Integrated eslint + prettier.
• 🍍 Integrated pinia，lightweight, simple and easy to use alternative to vuex.
• 📦 Integrated unplugin auto import.
• 🤹 Integrated iconify icon.
• 🍇 Integrated unocss.

Preview

https://rqd-china.github.io/naive-editor/

Getting Started

# Recommended setup git autocrlf 为 false
git config --global core.autocrlf false

# Clone Project
git clone https://github.com/RQD-china/naive-editor.git

cd naive-editor

# Install dependencies(Recommended use pnpm: https://pnpm.io/zh/installation)
npm i -g pnpm # Installed and can be ignored
pnpm i # or npm i

# Start
pnpm dev

Config

Mouse hover hint configuration：useMonacoEditor.ts:34

Database/Table Name Prompt Word Configuration：suggestionKeyword.ts:1