Skip to content

Latest commit

 

History

History
177 lines (126 loc) · 5.11 KB

README.md

File metadata and controls

177 lines (126 loc) · 5.11 KB

VS Code Settings

The below settings are recommended to help you follow our other guidelines.

Extensions

These are the minimum extensions we recommend you have installed.

Canvas projects can automatically install these extensions in VS Code.

These links will open the Visual Studio Marketplace.

We do not recommend the Prettier extension as it's too opinionated.

Settings

Useful settings to make your life easier.

Canvas projects can automatically apply these settings in VS Code.

Changing your settings

  1. Press cmd + , (ctrl + , on Windows) to open the settings dialog in VS Code
  2. Click the arrow pointing to the page icon in top right
  3. Paste settings below into the JSON format file this has opened

Table of contents

Bracket colourisation

"editor.bracketPairColorization.enabled": true
  • VS Code natively supports bracket colourisation so you no longer need the extension

Character limit

"editor.rulers": [
  80
],
"workbench.colorCustomizations": {
  "editorRuler.foreground": "#ffffff33"
}
  • Adds a vertical border in your code editor denoting where the 80 character limit is
  • editorRuler.foreground sets the colour of the ruler using alpha-hexadecimal values

Diff whitespace

"diffEditor.ignoreTrimWhitespace": false
  • Don't ignore whitespace in the diff view of VS Code
  • See trim trailing whitespace so you don't have to manually remove trailing whitespace

Disable file preview

"workbench.editor.enablePreviewFromQuickOpen": false
  • When opening files from cmd + p (or ctrl + p on Windows) file search they won't open in preview mode
  • This means that opening another file won't close the previous one

Disable theme check

"shopifyLiquid.disableWindowsWarning": true,
"shopifyLiquid.formatterDevPreview": false,
"themeCheck.checkOnChange": false,
"themeCheck.checkOnOpen": false,
"themeCheck.checkOnSave": false,
"themeCheck.onlySingleFileChecks": true,
"workbench.editor.enablePreviewFromQuickOpen": false
  • We use the Shopify Liquid extension to add syntax highlight and autocomplete, however it also comes with Theme Check which does not support Canvas
  • These settings disable theme check

End of line character

"files.eol": "\n"
  • Prevents issues with end of line characters being different

File associations

"files.associations": {
  "*.scss.liquid": "scss",
  "*.js.liquid": "javascript"
}
  • This tells VS Code to ignore the .liquid extension and open the files with the write sort of highlighting enabled

Git autofetch

"git.autofetch": true
  • Autofetches the Git repo every five minutes

HTML validation

"html.validate.scripts": false,
"html.validate.styles": false
  • Stops validating <script> and <style> tags in HTML files
  • These are frequently used to pass Liquid variables into global JS
  • Because of the presence of Liquid in these tags VS Code's linter flags errors

Lint on save

"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "scss"]
  • Runs eslint --fix and stylelint --fix on file save
  • formatOnSave is set to false to prevent Prettier extension from running (if installed)
  • Sets Stylelint extension to validate SCSS files as well as CSS files

Tab size

"editor.tabSize": 2
  • You should use a tab size of two spaces to follow guidelines

Trim trailing whitespace

"files.trimTrailingWhitespace": true
  • Trims any trailing whitespace on file save (makes linting happy)

← Back to homepage