ember-template-lint / ember-template-lint-plugin-prettier Goto Github PK
View Code? Open in Web Editor NEWA prettier plugin for ember-template-lint
License: Apache License 2.0
A prettier plugin for ember-template-lint
License: Apache License 2.0
The quest to add Handlebars support in to Prettier is now complete jgwhite/prettier#1 (comment).
The documentation in this repo should be updated to reflect this as the HBS support is no longer experimental. There may be some dependency changes that can be done at the same time to enforce usage of the officially compatible Prettier versions.
Do you plan to support this kind of usecase:
This is supported by eslint but it conflicts with prettier 😅. Is there a way to disable the rule on prettier or to support it.
If I can help please let me know 😉
Dependabot encountered the following error when parsing your .dependabot/config.yml
:
Automerging is not enabled for this account. You can enable it from the [account settings](https://app.dependabot.com/accounts/dcyriller/settings) screen in your Dependabot dashboard.
Please update the config file to conform with Dependabot's specification using our docs and online validator.
You can mention @dependabot in the comments below to contact the Dependabot team.
I believe it conflicts with Prettier, am I not right?
I'm using the recommended prettier plugin with .gjs
files and <template>
tags in components.
The prettier rule formats the component code after the <template>
tag.
Example:
<template>
<h1>Header</h1>
<div>Test</div>
</template>
However, ember-template-lint
with this plugin is giving a lint error and collapsing the first and last tags to the same line as template
which doesn't look good.
<template><h1>Header</h1>
<div>test</div></template>
The peerDep range excludes support for ember-template-lint
v3+ and prettier
v2+, which throws warnings when consumed by projects using those versions:
warning " > [email protected]" has unmet peer dependency "ember-template-lint@>=2.10.0".
Unless this plugin is meant to specifically not support those versions, can we update the peerDeps to be inclusive of the latest releases?
I am getting an error running lint:hbs
that says Cannot serialize worker response
. If I remove this plugin, it goes away. Any ideas?
Reproduction here shipshapecode/swach#1947
Wondering if we could integrate ember-template-lint w/ the VSC Prettier extension. Thanks!
esbenp.prettier-vscode https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
v4 moved to ESM -- as a result all template-lint plugins must also move to ESM.
I get this error atm:
require() of ES Module <repo>/node_modules/ember-template-lint-plugin-prettier/ember-template-lint-plugin-prettier.js from <repo>/node_modules/ember-template-lint/lib/get-config.js not supported.
Instead change the require of ember-template-lint-plugin-prettier.js in <repo>/node_modules/ember-template-lint/lib/get-config.js to a dynamic import() which is available in all CommonJS modules.}
An extra line break is added on each formatting of an attribute with curlies - when longer than the max line width.
Example:
<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind {{this.conditionalClass}}">
Some stuff
</div>
Prettier the 1st time. Perfect!:
<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind
{{this.conditionalClass}}">
Some stuff
</div>
Prettier the 2nd time:
<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind
{{this.conditionalClass}}">
Some stuff
</div>
Prettier the 3rd time:
<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind
{{this.conditionalClass}}">
Some stuff
</div>
Prettier the 4th time:
<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind
{{this.conditionalClass}}">
Some stuff
</div>
And so on. It's a niggle :)
Thanks for the great plugin BTW.
This is an amazing, wonderful package that will save my fingers so much typing and my brain, so much distraction. THANK YOU!
Ember Times 180 announced Handlebars support for prettier
, and recommended that folks use this repo to integrate it.
This repo defines peerDependencies
for outdated major versions of both ember-template-lint@2
and prettier@1
. The latest versions are [email protected]
and [email protected]
.
From my own experimentation, this repo works fine with the latest major versions, so it may only be the peer dependency ranges that need altering.
"ember-template-lint": "^2.10.0"
"ember-template-lint-plugin-prettier": "^2.0.0"
"prettier": "^2.0.5"
Behavior:
ember-template-lint --fix [FILE]
removes the newline at EOF
Expected behavior:
EOF newlines should at minimum be respected, or even added, since that is Prettier's behavior
I do not see this behavior if I remove prettier: true
from .template-lintrc.js
, which is what leads me to believe this is an issue with the plugin.
Line 29 is the last line with text, and Line 30 is a newline
@dcyriller how would you feel about my adding release-it
to this repo? We use it for most of our other repos, and it makes releasing really easy. I'm happy to add it.
Delete ⏎⏎⏎⏎⏎⏎⏎⏎⏎⏎⏎····················· (fixable)
Every single one of my app's test files shows this VSCode error at position [1, 1]. Clicking "fix" causes the entire test code to be laid out on a single line. If I disable ember-template-lint-plugin-prettier
in .template-lintrc.js
the error goes away. It only happens in test files, and furthermore it only appears in VSCode's "Problems" drawer--it does not appear in the CLI after linting.
Is anything else seeing this?
DEBUG: -------------------------------
DEBUG: Ember : 3.25.4
DEBUG: Ember Data : 3.25.0
DEBUG: Ember Simple Auth : 3.1.0
DEBUG: Model Fragments : 5.0.0-beta.2
DEBUG: -------------------------------
// .template-lintrc.js
'use strict';
module.exports = {
plugins: ['ember-template-lint-plugin-prettier'],
extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
};
// .prettierrc.js
'use strict';
module.exports = {
singleQuote: true,
printWidth: 300,
overrides: [
{
files: '*.hbs',
options: {
singleQuote: false,
},
},
],
};
This code fails the ember-template-lint prettier
rule:
module('Integration | Component | duration-picker', function (hooks) {
test('renders', async function (assert) {
await render(hbs`
<DurationPicker>
label
</DurationPicker>
`);
assert.dom(this.element).includesText('label');
});
);
[lint:hbs] tests/integration/components/duration-picker-test.js
[lint:hbs] 10:21 error Delete `⏎······` prettier
[lint:hbs] 12:2 error Delete `······` prettier
[lint:hbs] 12:14 error Replace `······</DurationPicker>⏎····` with `</DurationPicker>` prettier
[lint:hbs] 21:90 error Replace `"value"` with `'value'` prettier
After running ember-template-lint --fix
, this is the result:
module('Integration | Component | duration-picker', function (hooks) {
test('renders', async function (assert) {
await render(hbs`<DurationPicker>
label
</DurationPicker>`);
assert.dom(this.element).includesText('label');
});
);
Not good.
This behavior seemed to start in ember-template-lint v5 because .js
files were included by default. But you can reproduce it on ember-template-lint v4 by running directly against a js file, e.g. ember-template-lint ./tests/integration/components/duration-picker-test.js
.
It seems like the intention in #2 was for ember-template-lint-plugin-prettier not to run against embedded blocks:
ember-template-lint-plugin-prettier/lib/rules/prettier.js
Lines 45 to 49 in 43d7270
hbs`...`
block is getting passed into this plugin without any surrounding context and with { line: 1, column: 0 }
.
For now the best solution IMO is to disable this plugin for js files:
// .template-lintrc.js
'use strict';
module.exports = {
plugins: ['ember-template-lint-plugin-prettier'],
extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
rules: {
// ...
},
overrides: [
{
// overrides for inline hbs`...` literals in tests
files: ['tests/**/*-test.{js,ts}'],
rules: {
prettier: 'off',
},
},
],
};
Inline hbs support in prettier prettier/prettier#8647 is currently blocked by prettier/prettier#5588 and not getting much traction.
ember-template-lint v5 is out:
The work is being tracked in: ember-template-lint/ember-template-lint#2319
Can you please give me NPM publishing permission so I can release a new version? https://www.npmjs.com/~bmishkin
We need to get this change out:
This isn't a breaking change so we could just release version 4.1.0 for now.
I just released ember-template-lint v5: https://github.com/ember-template-lint/ember-template-lint/releases/tag/v5.0.0
CC: @dcyriller
A deprecation warning was added to ember-template-lint
in v3.8.0 that requires callers of the base rule's log
method to pass in the associated AST node
. This was required in order to provide consistent and accurate location information, including endLine
and endColumn
.
Currently, this package uses the older log
API, which causes that deprecation warning. Considering the version range supported in the peerDependencies
property in the package.json, we should consider conditionally changing the options passed to log
depending on version number of the parent repository's package.json.
And implement in this plugin the fix function.
I'm trying to set up ember-template-lint-plugin-prettier and eslint-plugin-hbs together.
The duet works, but not as well as I would like.
Given this perfectly formatted code:
module("module description", function () {
test("test description", async function () {
await render(
hbs`
<MyComponent
@foo={{this.foo}}
@bar={{this.bar}}
@baz={{this.baz}}
@qux={{this.qux}}
/>
`
);
});
});
ember-template-lint-plugin-prettier wants me to write it like this:
module("module description", function () {
test("test description", async function () {
await render(
hbs`<MyComponent
@foo={{this.foo}}
@bar={{this.bar}}
@baz={{this.baz}}
@qux={{this.qux}}
/>`
);
});
});
Which is not good.
Is it possible to somehow configure the plugins to work well together?
Or was it a bad idea to try it and I should wait for prettier/prettier#8647?
Users should be able to use this plugin with this configuration:
module.exports = {
extends: 'recommended',
plugins: ['prettier'],
rules: {
prettier: true,
'no-abstract-roles': true,
'no-obsolete-elements': true,
'no-positive-tabindex': true,
},
};
Currently it is:
module.exports = {
extends: 'recommended',
plugins: ['ember-template-lint-plugin-prettier'],
rules: {
prettier: true,
'no-abstract-roles': true,
'no-obsolete-elements': true,
'no-positive-tabindex': true,
},
};
/home/boris/project/node_modules/.pnpm/[email protected]/node_modules/prettier/index.cjs:600
var prettierPromise = import("./index.mjs");
^
TypeError: Invalid host defined options
at Object.<anonymous> (/home/boris/project/node_modules/.pnpm/[email protected]/node_modules/prettier/index.cjs:600:23)
at Module._compile (/home/boris/project/node_modules/.pnpm/[email protected]/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12)
at Module.require (node:internal/modules/cjs/loader:1115:19)
at require (node:internal/modules/helpers:119:18)
at Prettier.getPrettierOptions (file:///home/boris/project/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ember-template-lint-plugin-prettier/lib/rules/prettier.js:29:18)
at Prettier.exit (file:///home/boris/project/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ember-template-lint-plugin-prettier/lib/rules/prettier.js:56:40)
at file:///home/boris/project/node_modules/.pnpm/[email protected]/node_modules/ember-template-lint/lib/rules/_base.js:323:46
Even when a template file has no newline at the end of file, ember-template-lint-plugin-prettier
complains when used with ALE. This is because ALE always terminates the last line of the temp file it passes to ember-template-lint
with a newline.
dense-analysis/ale#3144 fixes this.
See basic test added to confirm it was possible over in ember-template-lint/ember-template-recast#254.
Using ember-template-lint v4
this plugin: v4
❯ yarn lint:hbs
yarn run v1.22.17
$ ember-template-lint .
file://<repo>/node_modules/ember-template-lint/lib/get-config.js:265
throw new Error(`Cannot find configuration for extends: ${extendName}`);
^
Error: Cannot find configuration for extends: ember-template-lint-plugin-prettier
at processExtends (file://<repo>/node_modules/ember-template-lint/lib/get-config.js:265:15)
at getProjectConfig (file://<repo>/node_modules/ember-template-lint/lib/get-config.js:399:5)
at async Linter.loadConfig (file://<repo>/node_modules/ember-template-lint/lib/linter.js:48:19)
at async Linter.verify (file://<repo>/node_modules/ember-template-lint/lib/linter.js:304:7)
at async run (file://<repo>/node_modules/ember-template-lint/bin/ember-template-lint.js:211:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.}
This is fixed by: ember-template-lint/ember-template-lint#2359
But blocked by: ember-template-lint/ember-template-lint#2360
cc @bmish
Use of version 3.0.1 results in:
(node:76359) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint/lib/index.js
require() of ES modules is not supported.
require() of /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint/lib/index.js from /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint-plugin-prettier/lib/rules/prettier.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint/package.json.
Also opened ember-template-lint/ember-template-lint#2320
<div class="details">
{{~t "player.ads_overlay.ad"~}}
{{~this.sep~}}
<span class="ad-place">
{{~this.adPlacement~}}
</span>
</div>
It won't let me do this, trying to understand how to tell it to ignore this but I still want it to warn me about other things...?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.