zl程序教程

您现在的位置是:首页 >  工具

当前栏目

开发编辑器进阶使用.md

编辑器开发 使用 进阶 md
2023-06-13 09:13:28 时间

[toc]

0x00 前言

俗话说:工欲善其事,必先利其器,作为一名开发必需要要一个得心应手的开发工具,比如下面的:

  • VScode : 轻量级的开发工具
  • IntelliJ IDEA Pycharm : Python项目开发必备;
  • IntelliJ IDEA JAVA : Java 开发项目推荐
  • Eclipse JavaEE IDE : Java 开发必备

1.Visual Studio Code 编辑器

在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。

VS vode特点:

  • 开源,免费;
  • 自定义配置
  • 集成git
  • 智能提示强大
  • 支持各种文件格式(html/jade/css/less/sass/xml)
  • 调试功能强大
  • 各种方便的快捷键
  • 强大的插件扩展

官网 :https://code.visualstudio.com/ github地址 :https://github.com/Microsoft/vscode


1.1 VS 安装插件

如何进入扩展插件下载? 方法一:按F1或Ctrl+Shift+p,输入extensions 方法二:ctrl + P 然后输入 >ext install 方法三:ctrl + shift + X

vscode常用插件:

P0.设置移植
 Chinese (Simplified) :中文(简体)语言包
 Settings Sync : 使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
 Visual Studio Keymap : VS使用者迁移到VS-Code



P1.主题美化:
One Dark Pro : Atom标志性的One Dark主题,也是VS Code下载次数最多的主题之一
Atom One Dark Theme : 基于Atom的黑暗主题
Night Owl  : 一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。



P2.文件图标:
 vscode-icons : 目前该插件已被vscode内部支持:"文件" -> "首选项" -> "文件图标主题"



P3.高效管理项目:
 Project Manager :定义自己的收藏项目,或选择自动检测VSCode项目,Git,Mercurial和SVN存储库或任何文件夹。


P4.自动格式化代码:
 beautify :美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码
 guides : 显示代码对齐辅助线(内置存在)
 Rainbow Brackets: 为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。
 Bracket Pair Colorizer: 用于着色匹配括号
 Indent-Rainbow: 用四种不同颜色交替着色文本前面的缩进


P5.搭建各类语言开发环境:
Code Runner: `Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,`



P6.代码调试联调:
 Debugger for Chrome : 从VS Code调试在Google Chrome中运行的JavaScript代码。
 REST Client:REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。


P7.自动检测代码规范:
 HTML Snippets : 完整的HTML代码提示,包括HTML5
 HTML CSS Support:在 html 标签上写class 智能提示css样式
 jQuery Code Snippets : 超过130个用于JavaScript代码的jQuery代码片段
 HTMLHint:html代码检测,支持html5
 Atuo Rename Tag : 修改 html 标签自动帮你完成头部和尾部闭合标签的同步修改
 Code Spell Checker:代码拼写检查器,与camelCase代码配合良好的基本拼写检查程序。
 Todo Tree:扩展可以快速搜索(使用ripgrep)您的工作区以获取TODO和FIXME等注释标记,并在资源管理器窗格的树视图中显示它们



P8.提升React等前端开发的效率:
npm intellsence : 用于在 import 语句中自动填充 npm 模块
path Intellisence
TypeScript Hero
Import Cost : 对引入的计算大小(node.js)
Path Intellisense : 可自动填充文件名。


P19.信息设置
filesize:在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间
GitLens:git日志查看插件增强了 Visual Studio Code 中内置的 Git 功能。


P10.高级功能
Azure Storage:VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器,文件共享,表和队列


p11.其他常用插件
Paste image : markdown粘贴图片

语言开发环境

C/C++环境

code runner插件默认的c/c++编译器是gcc/g++需要提前安装好并且设置好环境变量,通常选择MinGW或者MinGW-w64,建议选mingw-w64
离线版本x64:https://sourceforge.net/projects/mingw-w64/files/Toolchains%20targetting%20Win64/Personal%20Builds/mingw-builds/8.1.0/threads-posix/seh/x86_64-8.1.0-release-posix-seh-rt_v6-rev0.7z/download

离线版本x32:https://sourceforge.net/projects/mingw-w64/files/Toolchains%20targetting%20Win32/Personal%20Builds/mingw-builds/8.1.0/threads-posix/dwarf/i686-8.1.0-release-posix-dwarf-rt_v6-rev0.7z/download
#环境变量
setx PATH "%PATH%;D:\Builder\mingw64\bin"

#编译
g++ demo.c -o demo.exe

WeiyiGeek.

#java
language Support for Java(TM) by Red Hatredhat.java
Java Extension Pack : 流行的扩展,可以帮助在Visual Studio Code中编写,测试和调试Java应用程序
Spring Boot Extension Pack
Language support for Java ™ for Visual Studio Code

#C# : 适用于.NET Core的轻量级开发工具。伟大的C#编辑支持,包括语法突出显示,智能感知,转到定义,查找所有引用等。
CodeMetrics:计算TypeScript / JavaScript文件的复杂性。
VUE插件 :
1.2 VS 常用快捷键
Ctrl+,  #界面设置
Ctrl+`  #设备终端`
Ctrl+ H  #进行字符替换和正则替换
Shift + tab # 删除多行缩进 (常用)
Ctrl+ SHIFT + P #命令面板
Ctrl+Shift+X #打开扩展
Ctrk + K + S  # 快捷键设置首页->首选项->键盘快捷方式
1.3 VS 常用设置

问题1:Classpath is incomplete. Only syntax errors will be reported; 产生原因:当打开一个独立的java文件,不属于任何项目VS code的Java扩展将无法计算出正确的类路径,因而报告错误:“Classpath is incomplete. Only syntax errors will be reported.” (但这对独立的java文件而言毫无意义),实际功能不受影响。

#解决方法
修改用户空间 .settings.json 与
"java.errors.incompleteClasspath.severity": "info"

#2.导入一个真正的项目(包含pom.xml, build.gradle 或者 eclipse的配置文件),以便可以设置完整的classpath和项目结构

问题2:字符转换以及键盘按键设置 操作:键盘快捷方式[ctrl+k ctrl+s] , 输入大小写按键并进行测试;

WeiyiGeek.VSCODE

问题3.设置windows/linux终端

"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
"terminal.integrated.shell.linux": "D:\\Program Files\\Git\\git-bash.exe",
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"

问题4.设置MD粘贴图片设置

"pasteImage.defaultName": "YMMDDHHmmss",
"pasteImage.basePath": "C:\\Users\\Administrator\\Desktop\\fsdownload",
"pasteImage.path": "C:\\Users\\Administrator\\Desktop\\fsdownload",
"pasteImage.insertPattern": "![WeiyiGeek.](https://cdn.jsdelivr.net/gh/WeiyiGeek/blogimage/2019/${imageFilePath}${imageSyntaxSuffix}",

问题5.vscode字体设置

#控制字体系列。
"editor.fontFamily": "Consolas, 'Courier New', monospace",
#启用字体连字
"editor.fontLigatures": false,
#以像素为单位控制字号。
"editor.fontSize": 14,
#控制字体粗细。
"editor.fontWeight": "normal",

问题6:终端样式修改(即修改User Settings):

"terminal.external.osxExec": "iTerm.app",(适用于mac/os的iTerm)
"terminal.integrated.fontFamily": "Source Code Pro for PowerLine",  #特别是zsh主题的时候

问题7:JAVA编译环境 Build failed, do you want to continue?

#清空工作空间
Windows : %APPDATA%\Code\User\workspaceStorage\
MacOS : $HOME/Library/Application Support/Code/User/workspaceStorage/
Linux : $HOME/.config/Code/User/workspaceStorage/

问题8:添加vscode到右键菜单,由于安装时候未进行选择; 描述:下面的vscode是您自己的安装路径

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\*\shell\VSCode]
@="Open with Code"
"Icon"="D:\\Program Files\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\*\shell\VSCode\command]
@="\"D:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%1\""

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\shell\VSCode]
@="Open with Code"
"Icon"="D:\\Program Files\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\Directory\shell\VSCode\command]
@="\"D:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%V\""

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode]
@="Open with Code"
"Icon"="D:\\Program Files\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode\command]
@="\"D:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%V\""

问题8.vscode中检测代码中的空白行并去除的方法

#按下ctrl+h键进行正则匹配:
^\s*(?=\r?$)\n
^\d[^.]|(?=\r$)  #删除wiz笔记的代码行号(重要)

#保留替换简单正则匹配和替换,并留取关键字(采用了元组的形式)
比如:替换class="abc" 为 class="$style['abc']"
查找正则:class="(.*?)"
替换:class="$style['$1']"

#在比如匹配开头为字母的行在前面加入/
查找正则:(^[a-z])
替换:/$1
# /wp-config.swp
# /wp-config.txt

2.Pycharm 编辑器

pyCharm是一款很好用的编写Python工程的IDE,pycharm 是 Jetbrains 家族中的一个明星产品,

Jetbrains 家族和 Pycharm 版本划分:

  • 第一个版本是「Professional(专业版本)」,这个版本功能更加强大,主要是为 Python 和 web 开发者而准备,是需要付费的。
  • 第二个版本是「社区版」,一个专业版的阉割版,比较轻量级,主要是为 Python 和数据专家而准备的。

Jetbrains开发了许多好用的编辑器:

  • Java 编辑器(IntelliJ IDEA)
  • JavaScript 编辑器(WebStorm)
  • PHP 编辑器(PHPStorm)
  • Ruby 编辑器(RubyMine)
  • C 和 C++ 编辑器(CLion)
  • .Net 编辑器(Rider)
  • iOS/macOS 编辑器(AppCode)等等

官网下载:https://www.jetbrains.com/ 激活网站:http://idea.lanyus.com/

2.1 安装与设置

Step1.安装步骤这里就不说了下一步就行,我这里的版本是;

PyCharm 2019.1.3 (Professional Edition)
Build #PY-191.7479.30, built on May 29, 2019
Licensed to jetbrains js
Subscription is active until November 27, 2019
JRE: 11.0.2+9-b159.60 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

Step2.激活前清除hosts中屏蔽域名,激活后请将下面添加到hosts文件中;

0.0.0.0 account.jetbrains.com
0.0.0.0 www.jetbrains.com

WeiyiGeek.IntelliJ IDEA 注册码

Step3.功能更换和设置 Python 解释器,在File->Setting->Projec: xxx下找到 Project Interpreter

WeiyiGeek.Pycharm的python模块设置

Step4.调整字体大小 setting->Editor>General>font,调整控制台的字体及其大小setting->Editor>General>colorScheme>Console font‘ 设置文件编码 setting->Editor>General>file encodings

WeiyiGeek.file encodings

Step5.让一个 tab 键代替 4 个空格键

2.2 快捷键

熟悉每个编辑器的快捷键,能大大提高你的工作效率。 常用:

setting : Ctrl+alt+s

WeiyiGeek.快捷键1

WeiyiGeek.快捷键2

WeiyiGeek.Pycharm 快捷键图

2.3 问题配置

(1)Pycharm在创建py文件时,如何自动添加默认文件头注释? 用PyCharm创建一个Python文件或者向工程添加一个.py文件时,为了更好的使所编写的代码在各操作环境更好的运行,我们往往需要在.py文件中添加头文件标注相关信息。 打开PyCharm程序,根据菜单栏中按照如下进入设置:File -> settings -> Editor -> File and Code Templates -> Python Script,找到Python Script选项,然后将一下内容添加进文本框即可:

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @File : ${NAME}.py
# @CreateTime : ${DATE} ${TIME}
# @Author : WeiyiGeek
# @Function : 
# @Software: ${PRODUCT_NAME}

建立Python file文件将会自动生成文件注释头:

WeiyiGeek.文件注释

(2)Pycharm下载设置文件主题 pycharm主题风格。其设置如下:

  • 主题:File -> Settings -> Plugins,搜索:Material Theme UI 并安装。
  • 字体:File -> Settings -> Editor -> Font, Font: Source Code Pro,Size: 16, line-spacing: 1.0,apply,保存。
  • 字体颜色:File -> Settings -> Editor -> Color Scheme Font -> General, scheme选择github,apply,保存。

WeiyiGeek.rainglow

(3)pycharm中连接数据库sqlite 菜单中的 view > tool windows 选项 > 下拉下一级菜单选中为 database > 选择具体的数据库

WeiyiGeek.pycharm下载sqlite驱动

WeiyiGeek.选择SQLITE数据库并查看

3.IDEA 编辑器

描述:ideaUI是一款很好用的编写JAVA工程的IDE,可以说是既Eclipse之后的最好用的IDE没有之一

Jetbrains 家族和 idea 版本划分:

  • 第一个版本是「Ultimate(专业版本)ideaUI」,用于Web和企业开发,需要付费;
  • 第二个版本是「社区版」,一个专业版的阉割版,

Download IntelliJ IDEA: http://www.jetbrains.com/idea/download/#section=windows idea激活:http://idea.lanyus.com/

3.1 安装与配置

JAVA 开发环境配置 Step1.点击File –>Project Structure (Ctrl+Alt+Shift+S) Step2.点击左侧标签页SDKs选项,再点击左上角“+”,选择JDK路径

WeiyiGeek.

Step3.点击确定完成即可

3.2 入坑体验

Intellj IDEA光标为insert状态,无法删除内容 描述:发现打开java文件的光标是win系统下按了insert键后的那种宽的光标,并且还无法删除内容,且按删除(delete)键也只见光标往前移动,但内容却没有被删除, 原因:发现是插件plugins的问题 ideaVIM 插件的作用;

WeiyiGeek.isnert光标问题

找不到或无法加载主类 abstractDemo1 答:idea本身缓存问题,解决:清理缓存重启IDEA file-->invalidate Cache/restart 之后再重新build。

3.3 常规配置

1.代码快捷键补全代码的设置 设置路径: File | Settings | Editor | Live Templates 设置流程: 添加Template Group组与LiveTemplate 比如设置 syso

WeiyiGeek.

2.快捷键的设置 设置路径:File | Settings | Keymap 比如代码补全:ALT+/

WeiyiGeek.

3.4 插件推荐

Easycode是idea的一个插件,可以直接对数据库中的表(指定字段)生成 entity,controller,service,dao,mapper 无需任何编码简单而强大;\

#启动时在dao层加上@mapper注解,并且在在启动类里面加上@MapperScan("com.vue.demo.dao")注解。 

#<!--阿里巴巴连接池 SpingBoot pom.xml-->
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>druid</artifactId>           
  <version>1.0.9</version>      
</dependency>

WeiyiGeek.

Lombok 是idea的一个插件,通过注解的方式在编译时自动为属性生成构造器、getter/setter、equals、hashcode、toString方法。出现的神奇就是在源码中没有getter和setter方法,但是在编译生成的字节码文件中有getter和setter方法。 Lombok 的使用跟引用 jar 包一样,可以在官网(https://projectlombok.org/download)下载 jar 包,也可以使用 maven 添加依赖:

<dependency>
  <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.10</version>
    <scope>provided</scope>
</dependency>

注意事项:

  • 1.首次使用 Lombok 插件需要做如下几步配置,将 Lombok 插件安装到 IDEA,选中 Plugins,搜索 Lombok,点击 Install;
    • 选择默认的编译方式为 javac,因为 eclipse 是不支持 Lombok 的编译方式的,javac 支持 Lombok 的编译方式。
      • 打开注解生成器 Enable annotation processing
    • PS:IntelliJ IDEA 2019.2需要手动下载对应版本的插件,然后手动引入,在 IDEA 中选择 File -> Setting -> plugins 找到 Install Plugin from Disk…(注意版本不同位置可能有所差异)