Egg.js框架-代码提示块配置

1、Egg.js框架-代码提示块配置

Egg.js框架-代码提示块配置：文件=>首选项=>回车 =>插入如下代码 => ctrl+s 保存

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"egg-controller": {
		"scope": "javascript,typescript",
		"prefix": "egg controller",
		"body": [
			"'use strict';",
			"const Controller = require('egg').Controller;",
			"class $1Controller extends Controller {",
				"    async index() {",
					"        const { ctx } = this;",
					"        ctx.body = '$2';",
					"    }",
				"}",
				"module.exports = $1Controller;",
		],
		"description": "egg 控制器的代码提示"
	},
 
	"egg-service": {
		"scope": "javascript,typescript",
		"prefix": "egg service",
		"body": [
			"const Service = require('egg').Service;",
			"class $1Service extends Service {",
				"    async find(uid) {",
					"        const sql = ``;",
					"        const data = await this.app.mysql.query(sql);",
					"        return data;",
					"    }",
				"}",
				"module.exports = $1Service;",
		],
		"description": "egg 控制器的代码提示"
	},
 
	"myjuqery": {
		"prefix": "myjuqery",
		"body": [
			"<script src='http://code.jquery.com/jquery-3.4.1.min.js'></script>"
		],
		"description": "导入juqery工具包"
	},
 
	"myaxios": {
		"prefix": "myaxios",
		"body": [
			"<script src='https://unpkg.com/axios/dist/axios.min.js'></script>"
		],
		"description": "导入axios工具包"
	},
        "react-class": {
		"scope": "javascript,typescript",
		"prefix": "reactclass",
		"body": [
			"import React from 'react';",
			"import '../css/$1.css'",
			"",
			"class $1 extends React.Component {",
			"    render() {",
			"        return (",
			"",
			"        );",
			"    }",
			"}",
			"export default $1;",
		],
		"description": "react 类组件的代码提示"
	},
	"react-function": {
		"scope": "javascript,typescript",
		"prefix": "reactfunction",
		"body": [
			"import React from 'react';",
			"",
			"function $1() {",
			"     return (",
			"",
			"     );",
			"}",
			"",
			"export default $1;",
		],
		"description": "react 函数组件的代码提示"
	}
}

2、VsCode 常用插件

1. Auto Close Tag（自动闭合HTML/XML标签）
2. Auto Rename Tag（自动完成另一侧标签的同步修改）
3. Beautify（格式化代码）
4. Chinese (Simplified) Language Pack for Visual Studio Code（中文设置）
5. ESLint（语法纠错）
6. HTML CSS Support（让 html 标签上写class 智能提示当前项目所支持的样式）
7. HTML Snippets（HTML代码自动填充）
8. JavaScript (ES6) code snippets（ES6语法智能提示以及快速输入）
9. open in browser（直接右键项目单击启动）
10. Path Autocomplete
11. Path Intellisense（自动路劲补全）
12. Vetur（语法高亮、智能感知、Emmet等）
13. Vue 3 Snippets（Vue代码提示）
14. One Dark Pro（暗色主题）

3、VsCode settings.json配

{
    "workbench.colorTheme": "One Dark Pro",
    "vetur.format.options.tabSize": 4,
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced"
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.scriptInitialIndent": true,
    "vetur.format.styleInitialIndent": true,
    "vetur.grammar.customBlocks": {
        "docs": "md",
        "i18n": "json"
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "eslint.nodeEnv": "",
    "eslint.validate": [],
    "vetur.format.options.useTabs": false,
    "window.zoomLevel": 1,
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "editor.detectIndentation": false,
}