Table of contents
Suitable for front-end, back-end, and full-stack engineers, especially Javascript (Node.js).
At present, I personally use VS Code the most.
This chapter is not too much comparison, choose according to personal preference. For beginners, please use WebStorm, advanced Atom, VS Code, Sublime Text are not suitable for project development, but more suitable for debugging.
The specific configuration and key mapping, such as Atom and VS Code, also need to be set according to personal preferences. You can check the global configuration after installation and modify and adjust it yourself. Remember to make a backup.
WebStorm
Official address: http://www.jetbrains.com/webstorm/
Suitable for beginners.
Sublime Text 3
Install
Download URL: http://www.sublimetext.com/3
Configure subl shortcut commands (OS X)
If you want to save trouble, you can directly try to execute it in the terminal (or iTerm):
ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl
Detailed Process Decomposition
Open the application directory in Finder, find Sublime Textthe application, and select from the right-click menu 显示包内容.
Enter Contents -> SharedSupport -> binthe directory and see a subl file
Open a terminal and enter:
ln -s (停止输入,把Finder里的那个subl文件拖进来,按一个空格继续输入) /usr/local/bin/subl
If prompted ln: /usr/local/bin123/subl: No such file or directoryenter:
mkdir /usr/local/bin
Then re-execute the previous command.
Install Package Control
After the installation is complete, open Sublime, press ctrl + ~and enter in the pop-up console:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
In the future, use the shortcut key ⌘(command) + ⇧(shift) + pto enter Install, and you can call up Package Install to install the Sublime plugin theme.
Install and configure themes
Bring up Package Install, input theme, most themes start Theme:with , you can select with the mouse or the up and down keys of the keyboard, click or enter to start the installation.
Preference (左上角苹果按钮旁边点Sublime Text) -> Color SchemeAfter the installation is complete , select the theme you installed from and enable it.
Commonly used plug-ins
1.Terminal
After the installation is complete Preference -> Package Settings -> Terminal -> Settings - Default, enter the configuration from
Revise
"terminal": "",
for
"terminal": "iTerm.sh",
You can right-click to open the current directory from iTerm.
Atom
Download address: https://atom.io/
Advanced use, or VS Code.
I personally have been using WebStorm before. On the one hand, it is a paid IDE; on the other hand, the memory overhead of the environment is relatively large, and there are too many built-in functions. It is a good choice for newcomers, but after getting familiar with development , I don’t really need those auxiliary functions and plug-ins, so I will try some more lightweight and flexible editors.
Plugin List / Plugin List
Community Packages (49) /Users/willin/.atom/packages
├── [email protected]
├── atom-beautify
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── language-babel
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
Recommended configuration
"*":
"activate-power-mode":
particles:
size: {}
spawnCount: {}
totalCount: {}
screenShake: {}
"atom-beautify":
apex: {}
arduino: {}
c: {}
cfml: {}
coffeescript:
indent_size: 2
cpp: {}
cs: {}
css: {}
d: {}
ejs: {}
erb: {}
fortran: {}
general:
_analyticsUserId: "ea162638-166c-40b5-835b-108ef72f93f3"
analytics: false
beautifyEntireFileOnSave: false
gherkin: {}
handlebars: {}
html:
end_with_newline: true
indent_inner_html: true
indent_size: 2
max_preserve_newlines: 1
jade: {}
java: {}
js:
brace_style: "collapse-preserve-inline"
end_with_comma: true
end_with_newline: true
indent_size: 2
keep_function_indentation: true
json:
beautify_on_save: true
indent_size: 2
jsx: {}
latex: {}
less: {}
marko: {}
mustache: {}
objectivec: {}
pawn: {}
perl: {}
php: {}
python: {}
riot: {}
ruby: {}
rust: {}
sass: {}
scss: {}
spacebars: {}
sql: {}
svg: {}
swig: {}
tss: {}
twig: {}
typescript: {}
vala: {}
visualforce: {}
xml: {}
xtemplate: {}
"autoclose-html": {}
autosave:
enabled: true
core:
disabledPackages: [
"atom-terminal-panel"
"atom-beautify"
"editorconfig"
]
themes: [
"atom-material-ui"
"atom-material-syntax"
]
editor:
fontFamily: "'Source Code Pro for Powerline','Electrolize'"
fontSize: 15
invisibles: {}
showIndentGuide: true
softWrap: true
"exception-reporting":
userId: "69f2bdd3-5fcf-f92b-ecd5-461248e4bd3f"
"file-icons":
onChanges: true
"highlight-selected": {}
"js-hyperclick": {}
linter:
errorPanelHeight: 71
showErrorPanel: false
showErrorTabLine: true
"linter-eslint":
fixOnSave: true
"merge-conflicts": {}
minimap:
plugins:
"git-diff": true
"git-diffDecorationsZIndex": 0
"highlight-selected": true
"highlight-selectedDecorationsZIndex": 0
pigments: true
pigmentsDecorationsZIndex: 0
"project-manager":
sortBy: "last modified"
"rest-client": {}
"simplified-chinese-menu": {}
"split-diff":
diffWords: true
ignoreWhitespace: true
leftEditorColor: "red"
rightEditorColor: "green"
syncHorizontalScroll: true
"terminal-plus":
core:
mapTerminalsTo: "Folder"
style:
fontFamily: "'Source Code Pro for Powerline'"
"todo-show":
ignoreThesePaths: [
"**/node_modules/"
"**/vendor/"
"**/bower_components/"
"**/public/"
]
"tool-bar":
position: "Left"
"tool-bar-config": [
{
icon: "document"
iconSet: "ion"
title: "New File"
callback: "application:new-file"
}
{
icon: "folder"
iconSet: "ion"
title: "Open..."
callback: "application:open-folder"
}
{
icon: "archive"
iconSet: "ion"
title: "Save"
callback: "core:save"
}
{
icon: "spacer"
}
{
icon: "search"
iconSet: "ion"
title: "Find in Buffer"
callback: "find-and-replace:show"
}
{
icon: "shuffle"
iconSet: "ion"
title: "Replace in Buffer"
callback: "find-and-replace:show-replace"
}
{
icon: "spacer"
}
{
icon: "navicon-round"
iconSet: "ion"
title: "Toggle Command Palette"
callback: "command-palette:toggle"
}
{
icon: "gear-a"
iconSet: "ion"
title: "Open Settings View"
callback: "settings-view:open"
}
{
icon: "spacer"
}
{
icon: "refresh"
iconSet: "ion"
title: "Reload Window"
callback: "window:reload"
}
]
"tree-view":
autoReveal: true
welcome:
showOnStartup: false
keymap.cson
( 快捷键Set according to personal preferences and habits / up to your habit)
'atom-text-editor':
'cmd-alt-l': 'atom-beautify:beautify-editor'
'cmd-shift-l': 'atom-beautify:beautify-editor'
'cmd-alt-j': 'activate-power-mode:toggle'
'cmd-shift-j': 'activate-power-mode:toggle'
'cmd-`': 'terminal-plus:toggle'
'cmd-alt-up': 'pane:split-up'
'cmd-alt-down': 'pane:split-down'
'cmd-alt-left': 'pane:split-left'
'cmd-alt-right': 'pane:split-right'
'cmd-alt-shift-up':'window:focus-pane-on-up'
'cmd-alt-shift-down':'window:focus-pane-on-down'
'cmd-alt-shift-left':'window:focus-pane-on-left'
'cmd-alt-shift-right':'window:focus-pane-on-right'
'cmd-k':'pane:close'
'cmd-1':'todo-show:find-in-project'
Visual Studio Code
Download address: https://code.visualstudio.com/
After using Atom for more than half a year, an update caused the Terminal plug-in to fail, so I switched to VS Code.
In versions after 1.6 there is a terminal built in, so it's not bad.
It is much faster than Atom, especially the compressed js code, it is a nightmare to open in Atom, it may be caused by the automatic formatting of the code, the reason is unknown.
The disadvantages of VS Code are:
- ESLint error cannot directly jump to the website detailed description
- No MiniMap plugin
- There is no Power Mode plug-in, of course this is just for self-help, it doesn't matter
Overall, this is the first time I am so satisfied with Microsoft's stuff.
configuration
{
"editor.tabSize": 2,
"editor.fontSize": 13,
"editor.fontFamily": "'Source Code Pro for Powerline', Menlo, Monaco, 'Courier New', monospace",
"editor.fontWeight": "normal",
"editor.formatOnType": true,
"editor.wordWrap": true,
"extensions.autoUpdate": true,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 5000,
"terminal.external.osxExec": "iTerm.app",
"telemetry.enableTelemetry": false,
"telemetry.enableCrashReporter": false,
"window.zoomLevel": 1,
// 插件定义
"eslint.autoFixOnSave": true
}
button
[
// HHKB
{ "key": "cmd+escape", "command": "workbench.action.terminal.toggleTerminal" },
{ "key": "cmd+shift+escape", "command": "workbench.action.showErrorsWarnings"},
{ "key": "alt+i", "command": "cursorUp", "when": "editorTextFocus" },
{ "key": "alt+j", "command": "cursorLeft", "when": "editorTextFocus" },
{ "key": "alt+k", "command": "cursorDown", "when": "editorTextFocus" },
{ "key": "alt+l", "command": "cursorRight", "when": "editorTextFocus" }
]
plug-in
- Auto Close Tag
- ESLint
- exports autocomplete
- Material Icon Theme
- Material-theme
- Project Manager
- Sass
- ALL Highlights
- VS Color Picker
Cursor
You can also try the Cursor development tool based on VS Code and AI assistant. The usage habits and VS Code can be basically consistent, and the plug-ins are also fully compatible.
Official website address: https://www.cursor.so/