Run Prettier across projects
Problem:
Prettier was not running when I saved Emacs buffers.
Why?
- prettier-js-mode needs needs node; lorri exposes node to direnv; direnv
exposes node to Emacs; lorri was not working as expected.
Solution:
Now that I'm using nix-buffer, I can properly expose node (and other
dependencies) to my Emacs buffers. Now Prettier is working.
Commentary:
Since prettier hadn't worked for so long, I stopped thinking about it. As such,
I did not include it as a dependency in boilerplate/typescript. I added it
now. I retroactively ran prettier across a few of my frontend projects to unify
the code styling.
I may need to run...
```shell
$ cd ~/briefcase
$ nix-shell
$ npx prettier --list-different "**/*.{js,ts,jsx,tsx,html,css,json}"
```
...to see which files I should have formatted.
This commit is contained in:
William Carroll
parent
f4f7f454fa
commit
514136c99a
22 changed files with 181 additions and 128 deletions
|
|
@ -4,11 +4,13 @@
|
|||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "npx parcel src/index.html & npx tsc --watch --noEmit"
|
||||
"dev": "parcel src/index.html & npx tsc --watch --noEmit",
|
||||
"prettier": "prettier --ignore-path .gitignore --write \"**/*.{js,ts,jsx,tsx,html,css.json}\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^13.9.3",
|
||||
"parcel-bundler": "^1.12.4",
|
||||
"prettier": "^2.0.2",
|
||||
"tailwindcss": "^1.2.0",
|
||||
"typescript": "^3.8.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
const tailwindcss = require('tailwindcss')
|
||||
const tailwindcss = require("tailwindcss");
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
tailwindcss('./tailwind.config.js')
|
||||
]
|
||||
}
|
||||
plugins: [tailwindcss("./tailwind.config.js")],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,74 +1,84 @@
|
|||
import React from "react";
|
||||
import React from "react";
|
||||
|
||||
function ProgressBar(props: {
|
||||
done: number,
|
||||
total: number,
|
||||
units: string,
|
||||
color: string,
|
||||
done: number;
|
||||
total: number;
|
||||
units: string;
|
||||
color: string;
|
||||
}) {
|
||||
const { done, total, units, color } = props
|
||||
const width = Math.floor(done / total * 100)
|
||||
const rest = 100 - width
|
||||
const { done, total, units, color } = props;
|
||||
const width = Math.floor((done / total) * 100);
|
||||
const rest = 100 - width;
|
||||
|
||||
let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`]
|
||||
let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`];
|
||||
|
||||
if (color === 'white') {
|
||||
[fg, bg] = ['bg-gray-600', 'bg-gray-100']
|
||||
if (color === "white") {
|
||||
[fg, bg] = ["bg-gray-600", "bg-gray-100"];
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`relative ${bg} h-5`}>
|
||||
<div className={`${fg} h-5 absolute top-0 left-0`} style={{width: `${width}%`}}></div>
|
||||
<p className="absolute text-xs pl-1 pt-1">{done} of {total} {units}</p>
|
||||
<div
|
||||
className={`${fg} h-5 absolute top-0 left-0`}
|
||||
style={{ width: `${width}%` }}
|
||||
></div>
|
||||
<p className="absolute text-xs pl-1 pt-1">
|
||||
{done} of {total} {units}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function Goal(props: {
|
||||
subject: string,
|
||||
goal: string,
|
||||
done: number,
|
||||
total: number,
|
||||
units: string,
|
||||
color: string,
|
||||
subject: string;
|
||||
goal: string;
|
||||
done: number;
|
||||
total: number;
|
||||
units: string;
|
||||
color: string;
|
||||
}) {
|
||||
const { subject, goal, done, total, units, color } = props
|
||||
const width = "6em"
|
||||
const { subject, goal, done, total, units, color } = props;
|
||||
const width = "6em";
|
||||
|
||||
const Tr = (props: {
|
||||
label: string,
|
||||
value: string,
|
||||
valueComponent?: React.ReactElement,
|
||||
label: string;
|
||||
value: string;
|
||||
valueComponent?: React.ReactElement;
|
||||
}) => (
|
||||
<tr className="flex py-2">
|
||||
<td className="text-gray-600" style={{width: width}}>{props.label}</td>
|
||||
<td className="text-gray-600" style={{ width: width }}>
|
||||
{props.label}
|
||||
</td>
|
||||
<td className="flex-1">
|
||||
{props.valueComponent ? props.valueComponent : props.value}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<table className="w-full mb-10">
|
||||
<tbody>
|
||||
<Tr label="Subject" value={subject} />
|
||||
<Tr label="Goal" value={goal} />
|
||||
<Tr label="Progress" value={goal} valueComponent={
|
||||
<ProgressBar done={done} total={total} units={units} color={color} />
|
||||
}/>
|
||||
<Tr
|
||||
label="Progress"
|
||||
value={goal}
|
||||
valueComponent={
|
||||
<ProgressBar
|
||||
done={done}
|
||||
total={total}
|
||||
units={units}
|
||||
color={color}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function Copy(props: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<p className="pb-4 leading-loose">
|
||||
{props.children}
|
||||
</p>
|
||||
)
|
||||
function Copy(props: { children: React.ReactNode }) {
|
||||
return <p className="pb-4 leading-loose">{props.children}</p>;
|
||||
}
|
||||
|
||||
function App() {
|
||||
|
|
@ -78,7 +88,7 @@ function App() {
|
|||
<h1 className="text-center pt-12 pb-6">Goals</h1>
|
||||
<Copy>
|
||||
For me, a goal is something that is difficult for me to complete but
|
||||
easy for me to measure. I tend to add new goals as time progresses,
|
||||
easy for me to measure. I tend to add new goals as time progresses,
|
||||
mistakenly assuming that I can support additional goals for free. To
|
||||
counterbalance my tendancy to casually accumulate goals, I aim to only
|
||||
have three goals; I will not add a new goal until I complete an
|
||||
|
|
@ -90,27 +100,33 @@ function App() {
|
|||
</Copy>
|
||||
</section>
|
||||
<section className="pt-4">
|
||||
<Goal subject="Meditation"
|
||||
goal="Meditate for 10,000 hours"
|
||||
done={100}
|
||||
total={10000}
|
||||
units="hrs"
|
||||
color="purple" />
|
||||
<Goal subject="Debt"
|
||||
goal="Pay my student debt balance"
|
||||
done={30000}
|
||||
total={70000}
|
||||
units="USD"
|
||||
color="green" />
|
||||
<Goal subject="Brazilian Jiu Jitsu"
|
||||
goal="Train until an instructor gives me a black belt"
|
||||
done={1}
|
||||
total={5}
|
||||
units="belts"
|
||||
color="white" />
|
||||
<Goal
|
||||
subject="Meditation"
|
||||
goal="Meditate for 10,000 hours"
|
||||
done={100}
|
||||
total={10000}
|
||||
units="hrs"
|
||||
color="purple"
|
||||
/>
|
||||
<Goal
|
||||
subject="Debt"
|
||||
goal="Pay my student debt balance"
|
||||
done={30000}
|
||||
total={70000}
|
||||
units="USD"
|
||||
color="green"
|
||||
/>
|
||||
<Goal
|
||||
subject="Brazilian Jiu Jitsu"
|
||||
goal="Train until an instructor gives me a black belt"
|
||||
done={1}
|
||||
total={5}
|
||||
units="belts"
|
||||
color="white"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="mount"></div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ module.exports = {
|
|||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
|
|
@ -19,7 +15,5 @@
|
|||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4287,6 +4287,11 @@ prelude-ls@~1.1.2:
|
|||
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
|
||||
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
|
||||
|
||||
prettier@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08"
|
||||
integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==
|
||||
|
||||
pretty-hrtime@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue