feat: use prettier to format CSS and HTML (#343)

antfu · Dec 2, 2023 · cc31538 · cc31538
1 parent d31b4fd
commit cc31538
Show file tree

Hide file tree

Showing 40 changed files with 905 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -337,9 +337,36 @@ export default antfu({
 
 We provide some optional configs for specific use cases, that we don't include their dependencies by default.
 
+#### Prettier
+
+ESLint is mainly forced on JavaScript. It can support other languages with custom parsers, but that requires a lot of effort to rule parsers and rules to build ecosystems around them. For example, ESLint does not handle CSS and HTML at this moment. It has been a shame for a long time. But since Prettier supports wider range of languages, why don't we use Prettier for them?
+
+> [!WARNING]
+> This is experiemental :)
+
+To enable Prettier support, you need to explicitly turn it on and specify the languages you want to handle:
+
+```js
+// eslint.config.js
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  prettier: {
+    css: true, // Let Prettier handles CSS, LESS, SCSS, etc
+    html: true, // Let Prettier handles HTML
+  }
+})
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D eslint-plugin-prettier prettier
+```
+
 #### React
 
-To enable React support, need to explicitly turn it on:
+To enable React support  you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
@@ -358,7 +385,7 @@ npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refre
 
 #### UnoCSS
 
-To enable UnoCSS support, need to explicitly turn it on:
+To enable UnoCSS support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
@@ -476,9 +503,15 @@ If you enjoy this code style, and would like to mention it in your project, here
 
 [Why I don't use Prettier](https://antfu.me/posts/why-not-prettier)
 
-### How to lint CSS?
+Well, on the other hand, you can [use still Prettier to handle CSS and HTML formatting](#prettier), which is not yet supported by ESLint.
+
+### How to format CSS?
+
+~~This config does NOT lint CSS. I personally use [UnoCSS](https://github.com/unocss/unocss) so I don't write CSS.~~
+
+Yes, we do now! See [Prettier](#prettier) section for more details.
 
-This config does NOT lint CSS. I personally use [UnoCSS](https://github.com/unocss/unocss) so I don't write CSS. If you still prefer CSS, you can use [stylelint](https://stylelint.io/) for CSS linting.
+For better linting, we recommend trying [stylelint](https://stylelint.io/).
 
 ### I prefer XXX...
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -11,6 +11,10 @@ export default antfu(
       'fixtures',
       '_fixtures',
     ],
+    prettier: {
+      html: true,
+      css: true,
+    },
   },
   {
     files: ['src/**/*.ts'],

diff --git a/fixtures/input/css.css b/fixtures/input/css.css
@@ -0,0 +1,10 @@
+@media (max-width: 480px) {
+  .bd-examples {margin-right: -.75rem;margin-left: -.75rem
+  }
+
+ .bd-examples>[class^="col-"]  {
+  padding-right: .75rem;
+    padding-left: .75rem;
+
+  }
+}
diff --git a/fixtures/input/html.html b/fixtures/input/html.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<HTML CLASS="no-js mY-ClAsS">
+  <HEAD>
+    <META CHARSET="utf-8">
+    <TITLE>My tITlE</TITLE>
+    <META NAME="description" content="My CoNtEnT">
+  </HEAD>
+  <body>
+    <P>Hello world!<BR> This is HTML5 Boilerplate.</P>
+    <SCRIPT>
+    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+      ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    </SCRIPT>
+    <SCRIPT 
+      src="https://www.google-analytics.com/analytics.js" ASYNC DEFER></SCRIPT>
+  </body>
+</HTML>
diff --git a/fixtures/input/markdown.md b/fixtures/input/markdown.md
@@ -0,0 +1,35 @@
+Header
+======
+
+_Look,_ code blocks are formatted *too!*
+
+```js
+// This should be handled by ESLint instead of Prettier
+function identity(x) {
+  if (foo) {
+    console.log('bar');
+  }
+  }
+```
+
+```css
+/* This should be handled by Prettier */
+.foo { color:red;}
+```
+
+Pilot|Airport|Hours
+--|:--:|--:
+John Doe|SKG|1338
+Jane Roe|JFK|314
+
+- - - - - - - - - - - - - - -
+
++ List
+ + with a [link] (/to/somewhere)
++ and [another one]
+
+
+  [another one]:  http://example.com 'Example title'
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Curabitur consectetur maximus risus, sed maximus tellus tincidunt et.
diff --git a/fixtures/output/all/css.css b/fixtures/output/all/css.css
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/all/html.html b/fixtures/output/all/html.html
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/all/markdown.md b/fixtures/output/all/markdown.md
@@ -0,0 +1,34 @@
+Header
+======
+
+_Look,_ code blocks are formatted *too!*
+
+```js
+// This should be handled by ESLint instead of Prettier
+function identity(x) {
+  if (foo)
+    console.log('bar')
+}
+```
+
+```css
+/* This should be handled by Prettier */
+.foo { color:red;}
+```
+
+Pilot|Airport|Hours
+--|:--:|--:
+John Doe|SKG|1338
+Jane Roe|JFK|314
+
+- - - - - - - - - - - - - - -
+
++ List
+ + with a [link] (/to/somewhere)
++ and [another one]
+
+
+  [another one]:  http://example.com 'Example title'
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Curabitur consectetur maximus risus, sed maximus tellus tincidunt et.
diff --git a/fixtures/output/js/css.css b/fixtures/output/js/css.css
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/js/html.html b/fixtures/output/js/html.html
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/js/markdown.md b/fixtures/output/js/markdown.md
@@ -0,0 +1,34 @@
+Header
+======
+
+_Look,_ code blocks are formatted *too!*
+
+```js
+// This should be handled by ESLint instead of Prettier
+function identity(x) {
+  if (foo)
+    console.log('bar')
+}
+```
+
+```css
+/* This should be handled by Prettier */
+.foo { color:red;}
+```
+
+Pilot|Airport|Hours
+--|:--:|--:
+John Doe|SKG|1338
+Jane Roe|JFK|314
+
+- - - - - - - - - - - - - - -
+
++ List
+ + with a [link] (/to/somewhere)
++ and [another one]
+
+
+  [another one]:  http://example.com 'Example title'
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Curabitur consectetur maximus risus, sed maximus tellus tincidunt et.
diff --git a/fixtures/output/no-style/css.css b/fixtures/output/no-style/css.css
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/no-style/html.html b/fixtures/output/no-style/html.html
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/no-style/markdown.md b/fixtures/output/no-style/markdown.md
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/tab-double-quotes/css.css b/fixtures/output/tab-double-quotes/css.css
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/tab-double-quotes/html.html b/fixtures/output/tab-double-quotes/html.html
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/tab-double-quotes/markdown.md b/fixtures/output/tab-double-quotes/markdown.md
@@ -0,0 +1,34 @@
+Header
+======
+
+_Look,_ code blocks are formatted *too!*
+
+```js
+// This should be handled by ESLint instead of Prettier
+function identity(x) {
+	if (foo)
+		console.log("bar")
+}
+```
+
+```css
+/* This should be handled by Prettier */
+.foo { color:red;}
+```
+
+Pilot|Airport|Hours
+--|:--:|--:
+John Doe|SKG|1338
+Jane Roe|JFK|314
+
+- - - - - - - - - - - - - - -
+
++ List
+ + with a [link] (/to/somewhere)
++ and [another one]
+
+
+  [another one]:  http://example.com 'Example title'
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Curabitur consectetur maximus risus, sed maximus tellus tincidunt et.
diff --git a/fixtures/output/ts-override/css.css b/fixtures/output/ts-override/css.css
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/ts-override/html.html b/fixtures/output/ts-override/html.html
@@ -0,0 +1 @@
+// unchanged
diff --git a/fixtures/output/ts-override/markdown.md b/fixtures/output/ts-override/markdown.md
@@ -0,0 +1,34 @@
+Header
+======
+
+_Look,_ code blocks are formatted *too!*
+
+```js
+// This should be handled by ESLint instead of Prettier
+function identity(x) {
+  if (foo)
+    console.log('bar')
+}
+```
+
+```css
+/* This should be handled by Prettier */
+.foo { color:red;}
+```
+
+Pilot|Airport|Hours
+--|:--:|--:
+John Doe|SKG|1338
+Jane Roe|JFK|314
+
+- - - - - - - - - - - - - - -
+
++ List
+ + with a [link] (/to/somewhere)
++ and [another one]
+
+
+  [another one]:  http://example.com 'Example title'
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Curabitur consectetur maximus risus, sed maximus tellus tincidunt et.
diff --git a/fixtures/output/with-prettier/css.css b/fixtures/output/with-prettier/css.css
@@ -0,0 +1,11 @@
+@media (max-width: 480px) {
+  .bd-examples {
+    margin-right: -0.75rem;
+    margin-left: -0.75rem;
+  }
+
+  .bd-examples > [class^='col-'] {
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+  }
+}
diff --git a/fixtures/output/with-prettier/html.html b/fixtures/output/with-prettier/html.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html class="no-js mY-ClAsS">
+  <head>
+    <meta charset="utf-8" />
+    <title>My tITlE</title>
+    <meta name="description" content="My CoNtEnT" />
+  </head>
+  <body>
+    <p>
+      Hello world!<br />
+      This is HTML5 Boilerplate.
+    </p>
+    <script>
+      window.ga = function () {
+        ga.q.push(arguments)
+      }
+      ga.q = []
+      ga.l = +new Date()
+      ga('create', 'UA-XXXXX-Y', 'auto')
+      ga('send', 'pageview')
+    </script>
+    <script
+      src="https://www.google-analytics.com/analytics.js"
+      async
+      defer
+    ></script>
+  </body>
+</html>