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 常用插件
- Auto Close Tag(自动闭合HTML/XML标签)
- Auto Rename Tag(自动完成另一侧标签的同步修改)
- Beautify(格式化代码)
- Chinese (Simplified) Language Pack for Visual Studio Code(中文设置)
- ESLint(语法纠错)
- HTML CSS Support(让 html 标签上写class 智能提示当前项目所支持的样式)
- HTML Snippets(HTML代码自动填充)
- JavaScript (ES6) code snippets(ES6语法智能提示以及快速输入)
- open in browser(直接右键项目单击启动)
- Path Autocomplete
- Path Intellisense(自动路劲补全)
- Vetur(语法高亮、智能感知、Emmet等)
- Vue 3 Snippets(Vue代码提示)
- 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,
}