使用VScode开发工具必装的插件
插件名 |
作用 |
|---|---|
|
Chinese (Simplified) Language Pack
|
VSCode 简体中文包
|
|
open in browser
|
用 alt + b 能够在浏览器中查看当前页面
|
| Live Server | 代码保存，即可自动在浏览器中显示，无需重新刷新 |
|
Prettier - Code formatter
|
代码格式化工具
|
| Auto Close Tag | 自动帮你闭合标签 |
| Vetur | vue文件代码高亮插件-vscode中安装 |
| VueHelper | 代码提示插件-vscode中安装 |
| vscode-icons | 显示文件图标，方便准确查找文件，美化显示 |
| GitLens-Git supercharged | 增强了Visual Studio代码中内置的Git功能。它可以帮助您通过Git注释和代码镜头一目了然地可视化代码作者身份，无缝地导航和探索Git存储库，通过强大的比较命令获得有价值的见解 |
| koroFileHeader | 用于生成文件头部注释和函数注释的插件，可以提高团队的代码规范 |
| ESLint | 帮助检查代码，规范我们写代码的格式, 看着整洁 / 团队内成员风格统一，提高代码质量 |
ESLint在VSCode中使用：
- 一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc。
- 一定要配置插件监测的时机, 修改ESLint插件配置，边写代码, 让VSCode就提示ESLint规则，否则每次运行后, 才看到ESLint报错, 很累
- 不用管别的, 把红框的放在{}内即可
"eslint.run": "onType", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
-
随便文件里多敲击几个回车, vscode报错提示, 证明ESLint插件开始工作
-
ctrl + s 报错下是否能自动修复部分问题, 可以, 证明ESLint插件开始工作
-
在.eslintrc.js文件中, 可以调整规则(团队内可以自定义自己一套)
koroFileHeader的settings.json配置
{
//函数注释
"fileheader.cursorMode": {
"Description": "",
"Author": "自己的名字",
"param": "",
"return": ""
},
// 头部注释
"fileheader.customMade": {
"Description": "",
"Author": "自己的名字",
"Date": "Do not edit",
"LastEditTime": "Do not Edit"
},
"fileheader.configObj": {
"createFileTime": true,
"language": {
"languagetest": {
"head": "/$$",
"middle": " $ @",
"end": " $/"
}
},
"autoAdd": true,
"autoAddLine": 100,
"autoAlready": true,
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": false
},
"headInsertLine": {
"headInsertLine": {
"php": 4,
"sh": 4
},
"beforeAnnotation": {
"文件后缀": "该文件后缀的头部注释之前添加某些内容"
},
"afterAnnotation": {
"文件后缀": "该文件后缀的头部注释之后添加某些内容"
},
"specialOptions": {
"特殊字段": "自定义比如LastEditTime/LastEditors"
},
"switch": {
"newlineAddAnnotation": true
},
"supportAutoLanguage": [],
"prohibitAutoAdd": ["json"],
"prohibitItemAutoAdd": [
"项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
],
"moveCursor": true,
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"atSymbol": ["@", "@"],
"atSymbolObj": {
"文件后缀": ["头部注释@符号", "函数注释@符号"]
},
"colon": [": ", ": "],
"colonObj": {
"文件后缀": ["头部注释冒号", "函数注释冒号"]
},
"filePathColon": "路径分隔符替换",
"showErrorMessage": false,
"wideSame": false,
"wideNum": 13,
"CheckFileChange": false,
"createHeader": true,
"useWorker": false,
"designAddHead": false,
"headDesignName": "random",
"headDesign": false,
"cursorModeInternal": false
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"git.ignoreWindowsGit27Warning": true,
// 是否允许自定义的snippet片段提示
"editor.snippetSuggestions": "top",
"editor.fontWeight": "400",
"guides.enabled": false,
"git.confirmSync": false,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
// 配置文件关联，以便启用对应的提示
"files.associations": {
"*.vue": "vue",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
// eslint配置文件
"eslint.options": {
"extensions": [".js", ".vue"]
},
// eslint能够识别的文件后缀类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
"vue",
"html"
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"vetur.format.defaultFormatter.html": "prettier",
// 格式化快捷键（默认）：Shift+Alt+F
// prettier进行格式化时，开启eslint支持
"prettier.eslintIntegration": false,
"prettier.tabWidth": 4,
"prettier.tabSize": 4,
"editor.tabSize": 4,
// 是否使用单引号
"prettier.singleQuote": true,
"dart.flutterSdkPath": "/Applications/flutter",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.autoIndent": "false",
"editor.autoClosingQuotes": "always",
"javascript.format.placeOpenBraceOnNewLineForFunctions": true,
"typescript.format.placeOpenBraceOnNewLineForFunctions": true,
"C_Cpp.vcFormat.newLine.scopeBracesOnSeparateLines": true,
"javascript.format.insertSpaceAfterConstructor": true,
"vetur.format.options.tabSize": 4,
"vetur.format.options.useTabs": true,
"workbench.editor.enablePreview": true,
"[vue]": {
"editor.defaultFormatter": "svipas.prettier-plus"
},
"[jsonc]": {
"editor.defaultFormatter": "svipas.prettier-plus"
},
"workbench.colorTheme": "One Dark Pro",
"terminal.integrated.automationShell.windows": "",
"terminal.integrated.shellArgs.windows": ["-NoLogo"], // 方法1.忽略打印出来的 版本信息
"python.jediEnabled": false,
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"workbench.iconTheme": "vscode-icons",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.enableSmartCommit": true,
"diffEditor.ignoreTrimWhitespace": false,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.editor.untitled.hint": "hidden",
"vsicons.dontShowNewVersionMessage": true,
"workbench.statusBar.visible": true
}
}