Closed james-prado closed 11 months ago
We have integration tests that says otherwise. Mind sharing your config?
(Its path also)
https://github.com/Shopify/prettier-plugin-liquid/blob/main/test/config-use-tabs/fixed.liquid#L8-L14
We're also using prettier's resolveConfig
function to figure out which config to use, so am wondering what isn't working.
https://github.com/Shopify/theme-check-vscode/blob/main/src/formatter.ts#L57
Here's a PR that shows your scenario works as expected too. So something is up with how your config is being read.
I have the same issue.
I have created a .prettierrc.json file with printWidth: 800, which does not work in liquid files.
{ "printWidth": 800 }
my settings.json file looks like this:
{
"editor.largeFileOptimizations": false,
"workbench.iconTheme": "material-icon-theme",
"tabnine.experimentalAutoImports": true,
"editor.inlineSuggest.enabled": true,
"github.copilot.enable": {
"*": true,
"plaintext": false,
"markdown": false,
"scminput": false,
"yaml": true,
"xml": true,
"javascript": true,
"typescript": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"cssPeek.peekFromLanguages": [
"html",
"django-html",
"laravel-blade",
"razor",
"vue",
"blade",
"pug",
"jade",
"handlebars",
"php",
"twig",
"md",
"nunjucks",
"javascript",
"javascriptreact",
"erb",
"typescript",
"typescriptreact",
"HTML (Eex)",
"html-eex",
"ejs",
"liquid"
],
"editor.unicodeHighlight.nonBasicASCII": false,
"editor.unicodeHighlight.invisibleCharacters": false,
"editor.linkedEditing": true,
"editor.fontSize": 14,
"workbench.colorTheme": "Dracula",
"tailwindCSS.includeLanguages": {
"html": "liquid"
},
"editor.detectIndentation": false,
"prettier.tabWidth": 2,
"themeCheck.checkOnChange": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode"
},
"themeCheck.checkOnOpen": false,
"files.autoSave": "onFocusChange",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"npm.keybindingsChangedWarningShown": true,
"editor.tabSize": 2,
"shopifyLiquid.shopifyCLIPath": "",
"shopifyLiquid.disableWindowsWarning": false,
}
If i change the editor.defaultFormatter from Shopify.theme-check-vscode to esbenp.prettier-vscode everything works as expected. But the Shopify.theme-check-vscode is not working
Hey @charlespwd, sorry for the delayed response and thx for looking into this.
I use a .prettierrc
file in the root directory of my project.
.prettierrc
{
"bracketSpacing": true,
"printWidth": 100,
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}
I've also tried formatting the document without a local .prettierrc
file by setting these values explicitly through the prettier vscode extension, but that hasn't worked either.
settings.json
(my vscode settings)
{
...
"prettier.bracketSpacing": true,
"prettier.printWidth": 100,
"prettier.semi": false,
"prettier.singleQuote": false,
"prettier.tabWidth": 2,
"prettier.trailingComma": "es5",
"prettier.useTabs": false,
"prettier.resolveGlobalModules": true,
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode"
},
...
}
In case it's relevant, here's the file structure of the project.
.
├── .prettierrc
└── foo.liquid
Thing is... While we don't "watch for changes." It seems to be working for me?
This is weird 😕
Could it maybe be that some globally installed npm packages are interfering? I'm not really using anything unusual, just some basic prettier plugins.
The shape of the icons on the sidebar tells me you're using another VS Code extension for Liquid. Are you sure that's not conflicting with Shopify.theme-check-vscode?
https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode
Note that we respect the config files as recognized by the prettier CLI. So cosmiconfig .prettierrc/.json/etc is what we'll uphold.
And like I said, you do need to reload the window. It appears that we cache the result of the config internally.
I use an extension called Material Icon Theme that lets me customize the file icons. It shouldn't conflict with Prettier or Shopify Liquid at all.
Just to be sure - I removed all my vscode settings, disabled all extensions except Prettier and Shopify Liquid, uninstalled all my global npm packages, and made sure to reload vscode. Unfortunately the issue still persists.
Yep, I'm facing the same problem. All the files inside a Shopify theme project are formatted without taking into consideration the Global settings nor.prettierrc
inside the root of the project. It just ignores everything and goes to these defaults: https://github.com/Shopify/prettier-plugin-liquid#configuration
Describe the bug The
Shopify.theme-check-vscode
formatter indents with spaces even when"prettier.useTabs": true
specified.Unformatted source
Expected output
Actual output
Debugging information
v1.10.0