I. Browser

1, chrome

  • JSON Viewer (JSON formatting)
  • Allow CORS (Resolve cross-domain)
  • Axure (Prototype View)
  • Vue DevTools (Vue development tools)
  • Redux DevTools Redux DevTools
  • React Developer Tools React Developer Tools
  • React Perf (React Performance Monitor)

Second, editor

1, the Sublime does Text3

Lightweight development tools, with powerful plug-in support

  • Emmet (Emmet grammar)
  • AutoFileName (automatic filename)
  • Babel (solve JSX syntax problems)
  • Html-css-js Prettify HTML- CSS-js Prettify
  • Local History
  • SFTP (FTP tool)
  • TypeScript Syntex (TypeScript syntax highlighting)
  • Vue Syntex Highlight
  • LessImproved (style lang=”less” support)
  • Less (Less syntax highlighted)
  • Sass (Sass syntax highlighting)
  • MaterialTheme
  • CodeFormatter (PHP format, need to specify PHP path, only suitable for php7 or below, otherwise error)
  • Minify (compressed CSS/HTML /js/json/ SVG, need to be used according to the instructions)
  • Autoprefixer (automatic prefix)

Note: If the Autoprefixer command does not work (Ctrl+Shift+P), open the console and check the error message (Ctrl+~). If no configuration is found, add the following configuration and restart the console

{
    "browsers": ["last 7 versions"]."cascade": true."remove": true
}
Copy the code

Html-css-js Prettify CSS without new lines:

{
    "css": {
        "newline_between_rules": false}}Copy the code

2, VS Code

The front-end development artifact (vue/react/presents/typescript/small program/public number, etc.)

  • Beautify CSS/SASS/SCSS/LESS
  • Local History
  • One Dark Pro (Theme)
  • Vetur (.vue file formatting)
  • Beyond Motivator (Health Management)
  • Live Server Local services (refresh in real time)
  • Prettier+ (5-star formatting) Prettier+ (5-star formatting)
  • Prettier – JavaScript Formatter Prettier – JavaScript Formatter
  • Autoprofixer (add browser prefix)
  • Power Mode (hit effect 5 stars)
  • Vscode – Proto3 (proto3 format 5 stars)
  • SVG Preview
  • Code Spell Checker
  • VS Code Icons (beautiful file Icons)
  • Language-stylus (STYL support)
  • HTML Snippets

  • Mithril Emmet (Quick To Write)

  • Path Intellisense

  • Vetur (VUE formatting plug-in)
  • CSS Auto Prefix (CSS compatibility Prefix completion plug-in)

Wechat applet related

  • Developer tools (developers.weixin.qq.com/miniprogram…
  • WXML (wechat applet WXML formatting and highlighting components (highly customized))
  • Minapp (smart completion of wechat applet tags and attributes (native applet, MPvue and WEpy framework supported with snippets)
  • WeChat Snippets (TAB only)
  • Wechat applets custom component code snippet tips (JS code tips)

Alipay small program related

  • Developer tools (render.alipay.com/p/f/fd-jwq8…
  • Axml -highlight (AxML syntax highlighting for Alipay applet)

Applet conversion

  • Wx2my (wechat -> Alipay only)
  • Antmove (support for multiple conversions)

3, the Atom

Git development of a more powerful IDE

  • Activate-power-mode (tap effect)
  • Emmet (Emmet syntax support)
  • Local-history
  • Minimap (Mini view)
  • Autocomplete-paths (Automatic file paths)
  • Remote-ftp (FTP tool)
  • Atom-html-preview (Live preview of HTML on the right)
  • Broer-plus (open browser on the right)
  • Atom-live-server (Start local service)
    • ctrl-alt-l launch live server on port 3000
    • ctrl-alt-q stop live server
    • ctrl-alt-3 launch live server on port 3000
    • ctrl-alt-4 launch live server on port 4000
    • ctrl-alt-5 launch live server on port 5000
    • ctrl-alt-8 launch live server on port 8000
    • ctrl-alt-9 launch live server on port 9000
  • Open-html-in-browser (Right-click the directory HTML file to open the browser)

Reference links:

  • Blog.csdn.net/panshaoling…

4, HBuilderX

Vue friendly, set small program development features

www.dcloud.io/hbuilderx.h…

5, Typora

Markdown editor, with powerful export functions

www.typora.io/

5, IntelliJ IDEA

Java Web development wizard

  • Material Theme UI
  • Rainbow Brackets (Functional area Rainbow Brackets)
  • Codota (Intelligent automatic completion)
  • Alibaba Java Code Guideline
  • CodeGlance (Mini view)
  • Restful Tookit (Mandatory for Restful interfaces)
  • CamelCase (quickly toggling string concatenation formats such as hello_world -> hello-world or helloWorld)

Reference links:

  • Segmentfault.com/a/119000002…

Three, scientific Internet

PS: Sensitive information

FTP tool

  • MobaXterm：mobaxterm.mobatek.net/
  • XShell：xshell.en.softonic.com/

5. Interface proxy tool

  • Insomnia, Insomnia. Rest /
  • postman：www.postman.com/

Sixth, other

  • Online file comparison: www.jq22.com/textDiffere…
  • Beyond compare file comparison: link: pan.baidu.com/s/1Z93KkL3H… Extraction code: U61M
  • Sunflower remote connections: sunlogin.oray.com/personal/do…
  • AQ video recording: Aq-game.yy.com/
  • ScreenToGif: www.screentogif.com/
  • Flowchart drawing (Nut Cloud -> New drawing file) : www.jianguoyun.com/

Welcome to: technical development sharing record