VS Code를 사용한 Ruby on Rails 개발

프로그래밍을 처음 시작할 때 여러 편집기를 사용해 보았지만 VS Code는 금방 멈췄습니다. 지난 3년 동안 저는 열렬한 VIM 친구만큼 생산성을 발휘할 수 있도록 VS Code 설정, 확장, 키 바인딩 및 스니펫을 지속적으로 업데이트해 왔습니다.

다음은 CodeFund 및 Rails 측 프로젝트에서 작업할 때 사용하는 Rails 작업 설정을 보여주는 빠른 기사입니다.

확장



이것들이 가장 중요하다고 생각합니다. 전체 목록을 보려면 this gist 을 확인하십시오.

주제


  • One Dark Pro

  • 아이콘


  • VSCode Great Icons

  • 일반적인


  • Auto Close Tag
  • Auto Rename Tag
  • Bookmarks
  • Bracket Pair Colorizer
  • change-case
  • Code Runner
  • Dash
  • Docker
  • Duplicate action
  • Font Awesome Auto-complete & Preview
  • Git Extension Pack
  • Git History
  • GitHub Pull Requests
  • gitignore
  • GitLens
  • Markdown All in One
  • Mustache
  • Open in GitHub, Bitbucket, Gitlab, VisualStudio.com !
  • Peacock
  • Prettier
  • Prettier-Standard
  • Project Manager
  • Quick and Simple Text Selection
  • Sass Lint
  • Settings Sync
  • SVG Viewer
  • YAML

  • 루비 및 레일


  • endwise*
  • ERB Formatter/Beautify
  • Gem Lens
  • Rails Fast Nav*
  • Rails Flip-Flop*
  • Rails Routes
  • rails-latest-migration*
  • Rails
  • Ruby Haml
  • Ruby Solargraph*
  • Ruby*
  • Simple Ruby ERB
  • VSCode Ruby*
  • vscode-gemfile
  • YARD Documenter

  • * 꼭!

    설정



    이것은 내 전역 설정입니다. 많은 프로젝트의 경우 이러한 설정을 훌륭하게 작동하는 작업 공간 설정 파일로 재정의할 것입니다.

    {
        // 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"
      }
    }
    


    바라건대 당신이 당신에 추가하기 위해 내 설정에서 무언가를 취할 수 있기를 바랍니다!

    즐거운 코딩!

    좋은 웹페이지 즐겨찾기