WebStorm设置
- 换行
File—Settings—Editor—General—勾选Soft-wrap these files,然后在后面添加;*.*
来让所有文件都自动换行 - 显示行号
File—Settings—Editor—General—Appearance—Show line numbers - 打开多个项目
File—Settings—Directories—Add Content Root
WebStorm快捷键
- 全局搜索(Ctrl + Shift + F)
Edit—Find—Find in Path - 复制当前行或者所选代码块(Ctrl + D)
- 删除光标所在位置行(Ctrl + Y)
- 格式化代码(Ctrl + Alt + L)
- 行注释(Ctrl + /)
- 块注释(Ctrl + Shift + /)
- 光标所在位置大小写转换(Ctrl + Shift + U)
- 重命名(Shift + F6)
- 环绕标签(Ctrl + Alt + T)
VSCode设置
- 代码缩进2个字符:搜索Detect Indentation然后取消勾选,再搜索tabsize从4改成2
- 自动折行:搜索editor.wordWrap设置为on,需要取消勾选屏幕优化
- 文件自动保存:搜索files.autoSave设置为onFocusChange,编辑器失去焦点时自动保存更新后的文件
- Tab键自动填入最佳推荐值:editor.tabCompletion设置为on
- 设置显示行号:搜索editor.lineNumbers设置为true
- 开启代码提示:搜索prevent取消此项的勾选
- 中文乱码:①搜索files.autoGuessEncoding设置为true;②安装GBKtoUTF8插件
VSCode插件
- View In Browser(运行html文件)
- Webstorm IntelliJ Darcula Theme(和Webstorm一样的字体和主题)
- open in browser(在浏览器中查看)
- Live Server(实时预览。我们在编辑器中修改代码,按Ctrl+S保存,修改效果就会实时同步,显示在浏览器中,不用再手动刷新。)
- Auto Rename Tag(自动修改匹配的HTML标签)
- Highlight Matching Tag(高亮显示匹配标签。帮我们将选中的匹配标签高亮显示)
- Vscode-icons VSCode(文件图标)
- Vscode-icons-mac(mac文件图标)
- TODO Highlight (高亮。如果我们在编写代码时想在某个地方做一个标记,后续再来完善或者修改里面的内容,可以利用此插件高亮显示,之后可以帮助我们快速定位到需要修改的代码行。)
- Code Spell Checker(单词拼写检查。会自动帮我们识别单词拼写错误并且给出修改建议)
- Code Runner(运行选中代码段。右键选择Run Code,支持大量语言,包括Node)
- Improt Cost(成本提示。导入工具包的时候提示这个包的体积)
- GitLens(查看Git信息。将光标移到代码行上,即可显示当前行最近的commit信息和作者,多人开发的时候十分有用,责任到人,防止甩锅)
- Bookmarks(书签。对代码进行书签标记,通过快捷键实现快速跳转到书签位置,具体的快捷键可以在键盘快捷方式中自定义设置。)
- Vscode-element-helper(element-ui。编写标签时自动提示element标签名称)
- Version Lens(工具包版本信息。在package.json中显示你下载安装的npm工具包的版本信息,同时会告诉你当前包的最新版本。)
- Vetur(Vue语言包,语法高亮、智能感知、Emmet等。安装插件后编写vue文件输入vue,按Tab键就可以自动补全模版。)
- Path Intellisense(智能路径提示,可以在你输入文件路径时智能提示。)
- Markdown Preview(实时预览Markdown)
- Stylelint(CSS / SCSS / Less 语法检查)
- VueHelper(snippet代码片段)
- CSScomb(CSS 书写顺序规则)
- Turbo Console Log(快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log;alt + shift + c 注释所有 console.log;alt + shift + u 启用所有 console.log;alt + shift + d 删除所有 console.log)
- css-auto-prefix(自动添加 CSS 私有前缀)
- change-case(转换命名风格。快速更改当前选择或当前单词的大小写(camelCase, CONSTANT_CASE, snake_case等))
- CSS Peek(从html中的class定位到在css样式的位置)
- vscode-json(处理 JSON 文件格式)
- Regex Previewer(实时预览正则表达式的效果)
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- css-format-one-line(css单行多行格式化。格式化为单行Ctrl + J;格式化为多行Ctrl + I)
- Codelf(变量命名神器)
- Project Manager(项目管理器)
- EditorConfig for VS Code(多人协作统一代码风格)
- Prettier - Code formatter(代码格式化)
- ESLint(代码检测)
- Vue VSCode Snippets(快速生成Vue3代码,使用文档)
- htmltagwrap(外层包裹一层默认的标签(默认标签可以更改),按“Alt+w”、“option+w“)
- Color Info(在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了)
- DotENV(读取.env文件)
- Remote ssh(部署上线时使用,修改远程服务器里面文件的方式)
VSCode快捷键
- 生成vue模板(vue→tab)
- 生成html模板(!→tab)
- 固定窗口打开所有文件(双击文件标题变成正体)
- 最小化窗口(Ctrl+H)
- 剪切一行(Ctrl+X)
- 删除一行(Ctrl+Shift+K)
- 复制一行(向下复制一行shift + alt + ↓ )(向上复制一行shift + alt + ↑ )
- 查找替换(Ctrl+H)
- 替换查找的全部内容Ctrl+Alt+Enter
- 块级注释(Shift+Alt+A)(MAC:Shift + Option + A)