使用 VS Code 进行 Ruby on Rails 开发
扩展
设置
快捷键
片段
我刚开始接触编程时尝试过好几种编辑器,但很快就爱上了 VS Code。过去三年里,我一直在不断更新我的 VS Code 设置、扩展、快捷键和代码片段,力求达到和我的 VIM 死忠粉朋友们一样的效率。
这是一篇简短的文章,介绍了我在开发CodeFund和我的 Rails 副项目时使用的 Rails 设置。
扩展
这些是我认为最重要的几点。完整列表请查看此概要。
主题
图标
一般的
- 自动关闭标签
- 自动重命名标签
- 书签
- 括号对着色器
- 更改大小写
- 代码运行器
- 短跑
- Docker
- 重复操作
- Font Awesome 自动完成和预览
- Git扩展包
- Git 历史记录
- GitHub Pull Requests
- .gitignore
- GitLens
- Markdown All in One
- 胡子
- 在 GitHub、Bitbucket、Gitlab、VisualStudio.com 中打开!
- 孔雀
- 更漂亮
- 更漂亮的标准
- 专案经理
- 快速简便的文本选择
- 萨斯·林特
- 设置同步
- SVG 查看器
- YAML
Ruby & Rails
- 末端*
- ERB格式化/美化
- 宝石透镜
- Rails 快速导航*
- Rails触发器*
- 铁路路线
- rails-latest-migration*
- 铁路
- 鲁比·哈姆尔
- 红宝石太阳图*
- 红宝石*
- 简单的 Ruby ERB
- VSCode Ruby*
- vscode-gemfile
- 码头文件记录员
必备!
设置
这些是我的全局设置。对于很多项目,我会用工作区设置文件覆盖这些设置,效果很好。
{
// TELEMETRY
// Enable usage data and errors to be sent to a Microsoft online service.
"telemetry.enableTelemetry": false,
// WINDOW
// Adjust the zoom level of the window.
"window.zoomLevel": 0,
// BREADCRUMBS
// Enable/disable navigation breadcrumbs.
"breadcrumbs.enabled": true,
// EXPLORER
// Controls whether the explorer should ask for confirmation to move files and folders via drag and drop.
"explorer.confirmDragAndDrop": false,
// Controls whether a top border is drawn on modified (dirty) editor tabs or not.
"workbench.editor.highlightModifiedTabs": true,
// Controls the location of the sidebar. It can either show on the left or right of the workbench.
"workbench.sideBar.location": "right",
// Controls which editor is shown at startup, if none are restored from the previous session.
"workbench.startupEditor": "newUntitledFile",
// Specifies the icon theme used in the workbench or 'null' to not show any file icons.
"workbench.iconTheme": "vscode-great-icons",
// Specifies the color theme used in the workbench.
"workbench.colorTheme": "One Dark Pro",
// Overrides colors from the currently selected color theme.
"workbench.colorCustomizations": {
"editor.background": "#1a1c20",
"editorIndentGuide.activeBackground": "#b83957",
"tab.activeBorderTop": "#64676E"
},
// EDITOR
// Controls whether the editor should run in a mode where it is optimized for screen readers.
"editor.accessibilitySupport": "off",
// Controls the font family.
"editor.fontFamily": "Fira Code",
// Enables/Disables font ligatures.
"editor.fontLigatures": true,
// Controls the font size in pixels.
"editor.fontSize": 14,
// Controls the line height. Use 0 to compute the line height from the font size.
"editor.lineHeight": 20,
// Controls the letter spacing in pixels.
"editor.letterSpacing": 0.2,
// Controls the font weight.
"editor.fontWeight": "400",
// The number of spaces a tab is equal to.
"editor.tabSize": 2,
// Controls how the editor should render whitespace characters.
"editor.renderWhitespace": "all",
// Controls the cursor style.
"editor.cursorStyle": "line",
// Controls the width of the cursor when #editor.cursorStyle# is set to line.
"editor.cursorWidth": 5,
// Control the cursor animation style.
"editor.cursorBlinking": "solid",
// Render vertical rulers after a certain number of monospace characters. Use multiple values for multiple rulers.
"editor.rulers": [
120
],
// Controls whether the minimap is shown.
"editor.minimap.enabled": false,
// Format a file on save.
"editor.formatOnSave": false,
// Timeout in milliseconds after which the formatting that is run on file save is cancelled.
"editor.formatOnSaveTimeout": 1500,
// Controls whether the editor should automatically format the pasted content.
"editor.formatOnPaste": true,
// Controls whether the editor should automatically format the line after typing.
"editor.formatOnType": false,
// Controls whether the editor should automatically adjust the indentation when users type, paste or move lines.
"editor.autoIndent": "keep",
// TERMINAL
// Customizes which terminal application to run on macOS.
"terminal.external.osxExec": "Archipelago.app",
// The path of the shell that the terminal uses on macOS
"terminal.integrated.shell.osx": "/bin/zsh",
// Controls the font size in pixels of the terminal.
"terminal.integrated.fontSize": 14,
// FILES
// When enabled, will trim trailing whitespace when saving a file.
"files.trimTrailingWhitespace": true,
// When enabled, insert a final new line at the end of the file when saving it.
"files.insertFinalNewline": true,
// When enabled, will trim all new lines after the final new line at the end of the file when saving it.
"files.trimFinalNewlines": true,
// Controls auto save of dirty files.
"files.autoSave": "onFocusChange",
// Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.
"files.associations": {
"*.erb": "erb",
"Gemfile": "ruby"
},
// EMMET
// Enable Emmet abbreviations in languages that are not supported by default.
"emmet.includeLanguages": {
"html": "html",
"html.erb": "html",
"html.inky": "html",
"erb": "html"
},
// LANG: Javascript
// Enable/disable automatic updating of import paths when you rename or move a file in VS Code.
"javascript.updateImportsOnFileMove.enabled": "always",
"npm.packageManager": "yarn",
// PLUGIN: Ruby
// Use built-in language server
"ruby.useLanguageServer": true,
// Time (ms) to wait after keypress before running enabled linters.
"ruby.lintDebounceTime": 1500,
//run non-lint commands with bundle exec
"ruby.useBundler": true,
// Set individual ruby linters to use
"ruby.lint": {
// enable standard via bundler
"standard": {
// Prefix the `standard` command with `bundle exec`
"useBundler": true
}
},
// Which system to use for formatting. Use `false` to disable or if another extension provides this feature.
"ruby.format": "standard",
// GIT
// When enabled, commits will automatically be fetched from the default remote of the current Git repository.
"git.autofetch": true,
// Commit all changes when there are no staged changes.
"git.enableSmartCommit": true,
// Enables commit signing with GPG.
"git.enableCommitSigning": true,
// Ignores the warning when there are too many changes in a repository.
"git.ignoreLimitWarning": true,
// PLUGIN: Gitlens
// Specifies where to show the Repositories view
"gitlens.views.repositories.location": "gitlens",
// Specifies where to show the File History view
"gitlens.views.fileHistory.location": "gitlens",
// Specifies where to show the Line History view
"gitlens.views.lineHistory.location": "gitlens",
// Specifies where to show the Compare view
"gitlens.views.compare.location": "gitlens",
// Specifies where to show the Search Commits view
"gitlens.views.search.location": "gitlens",
// Specifies whether to provide an authors code lens, showing number of authors of the file or code block and the most prominent author (if there is more than one)
"gitlens.codeLens.authors.enabled": false,
// Specifies whether to provide a recent change code lens, showing the author and date of the most recent commit for the file or code block
"gitlens.codeLens.recentChange.enabled": false,
// Specifies whether to provide any Git code lens, by default.
"gitlens.codeLens.enabled": false,
// PLUGIN: Settings Sync
// Controls whether opened editors should show in tabs or not.
"sync.gist": "YOUR_TOKEN",
// PLUGIN: Font Awesome Auto-complete
"fontAwesomeAutocomplete.patterns": [
"**/*.html",
"**/*.html.erb"
],
// PLUGIN: Peacock
// Colors for Peacock extension
"peacock.favoriteColors": [
{
"name": "Angular Red",
"value": "#b52e31"
},
{
"name": "Auth0 Orange",
"value": "#eb5424"
},
{
"name": "Azure Blue",
"value": "#007fff"
},
{
"name": "C# Purple",
"value": "#68217A"
},
{
"name": "Gatsby Purple",
"value": "#639"
},
{
"name": "Go Cyan",
"value": "#5dc9e2"
},
{
"name": "Java Blue-Gray",
"value": "#557c9b"
},
{
"name": "JavaScript Yellow",
"value": "#f9e64f"
},
{
"name": "Mandalorian Blue",
"value": "#1857a4"
},
{
"name": "Node Green",
"value": "#215732"
},
{
"name": "React Blue",
"value": "#00b3e6"
},
{
"name": "Something Different",
"value": "#832561"
},
{
"name": "Vue Green",
"value": "#42b883"
}
],
// Language specific formatting settings
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[markdown]": {
"editor.defaultFormatter": "yzhang.markdown-all-in-one"
},
"[yaml]": {
"editor.defaultFormatter": "redhat.vscode-yaml"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "numso.prettier-standard-vscode"
},
"[ruby]": {
"editor.formatOnSave": true
},
"[scss]": {
"editor.formatOnSave": true
}
}
快捷键
[
{
"key": "shift+alt+e",
"command": "erb.toggleTags",
"when": "editorTextFocus"
},
{
"key": "alt+f",
"command": "extension.railsFlipFlop"
}
]
片段
如果您对第一个代码片段感兴趣,请查看hopsoft/model_probe !
{
"model comments": {
"prefix": "rmc",
"body": [
" # extends ...................................................................",
"",
" # includes ..................................................................",
"",
" # relationships .............................................................",
"",
" # validations ...............................................................",
"",
" # callbacks .................................................................",
"",
" # scopes ....................................................................",
"",
" # additional config (i.e. accepts_nested_attribute_for etc...) ..............",
"",
" # class methods .............................................................",
"",
" # public instance methods ...................................................",
"",
" # protected instance methods ................................................",
"",
" # private instance methods ..................................................",
""
],
"description": "model comments"
},
"Add pry binding": {
"prefix": "bp",
"body": [
"binding.pry"
],
"description": "Add pry binding"
},
"Add erb pry binding": {
"prefix": "ebp",
"body": [
"<% binding.pry %>"
],
"description": "Add erb pry binding"
}
}
希望我的配置能给你一些启发,并应用到你的配置中!
祝您编程愉快!
文章来源:https://dev.to/andrewmcodes/ruby-on-rails-development-with-vs-code-p1i