基于vscode的前端开发环境

语言包

中文包: Chinese (Simplified) Language Pack for Visual Studio Code

• Ctrl+Shift+P 打开命令面板，之后输入 "config" 筛选可用命令列表，最后选择配置语言命令。

  
  

外观设置

主题: Solarized Dark

• VSCode 已经内置可以直接在settings.json中配置

{
  "workbench.colorTheme": "Solarized Dark"
}

图标: VSCode Great Icons

• Installation

ext install EditorConfig

• settings.json

{
  "workbench.iconTheme": "vscode-great-icons"
}

字体: Fira Code

• Download
• How to install
• settings.json

缩进: Guides

• Installation

ext install Guides

• settings.json

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}

• 效果
  
  javascript console utils(自定义风格的console)
• Installation

javascript console utils

• How to use

// 一键生成
cmd+shift+L
// 删除所有console
cmd+shift+D

• 修改插件
  1. git clone
  2. edit file extension.js replace 62 lines

  const str = `${text}`.replace(/\'|\"/g,'');
  const logToInsert = `console.log('%c${str}: ','color: MidnightBlue; background: Aquamarine; font-size:   20px;',${text});`;
  
  

  3. npm install vsce -g
  4. 修改包的版本如0.8.0(package.json中的version)
  5. vsce package生成vsix文件

  6. 卸载原有的javascript console utils插件，再从vscode安装

     
     

  7. 大功告成,look一下效果

     
     

风格检查

缩进方式: EditorConfig 通过简单的配置文件在不同团队成员、不同 IDE、不同平台下约定好文件的缩进方式、编码格式，避免出现混乱

• Installation

ext install EditorConfig

• How to use

new .editorconfig file in the root directory

• coding

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2

代码格式化: Prettier

• Installation

ext install esbenp.prettier-vscode

vue格式化: Vetur

• Installation

ext install Vetur

snippets(自定义代码片段) 神器!

• 自定义snippets
  
  具体使用方法请点击这里
• plugin
  1.HTML Snippets HTML 标签片段
  2.Javascript (ES6) Code Snippets 常用的类声明、ES 模块声明、CMD 模块导入等

自动补全

• Auto Close Tag 自动补全要闭合的标签
• Auto Rename Tag 修改开始（结束）标签的时候修改对应的结束（开始）标签
• Path Intellisense 文件路径补全
• NPM Intellisense NPM 依赖补全
• IntelliSense for CSS class names in HTML CSS 类名补全
• Emmet vscode已经内置了Emmet

功能增强

• Color Highlight 识别代码中的颜色
• Bracket Pair Colorizer 识别代码中的各种括号，并且标记上不同的颜色
• Project Manager 项目管理，让我们方便的在命令面板中切换项目文件夹

  Project Manager: Save Project Save the current folder as a new project
  Project Manager: Edit Project Edit your projects manually (projects.json)
  Project Manager: List Projects to Open List all saved/detected projects and pick one
  Project Manager: List Projects to Open in New Window List all saved/detected projects and pick one to be opened in New Window
  Project Manager: Refresh Projects Refresh the cached projects
  

• Git Lens 优化VSCode内置Git的体验

编码效率

Document This 能够一键给代码中的类、函数加上注释，支持函数声明、函数表达式、箭头函数等

• How to use
  1. windows

    alt+ctrl+D
  

  2. osx

  ^(control)+⎇(option)+D
  

  重复俩次

Code Spell Checker 实时的识别单词拼写是否有误，并给出提示
Code Runner 选中要执行的代码鼠标右键run code

插件管理工具(Settings Sync)

Settings Sync
使用GitHub Gist跨多台机器同步设置、代码片段、主题、文件图标、启动、键绑定、工作区和扩展。

简单的事情重复化，重复的事情标准化，标准的事情自动化

能让你开发效率翻倍的 VSCode 插件配置（上）
能让你开发效率翻倍的 VSCode 插件配置（中)

后续会更新更多使用技巧..........