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 2020-03-27 10:52:13 +00:00
parent f4f7f454fa
commit 514136c99a
22 changed files with 181 additions and 128 deletions

View file

@ -1,7 +1,5 @@
const tailwindcss = require('tailwindcss')
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js')
]
}
plugins: [tailwindcss("./tailwind.config.js")],
};

View file

@ -8,7 +8,7 @@ import type { Book } from "./store";
const App: React.FC = () => {
const dispatch = useDispatch();
const { isLoading, books } = useTypedSelector(state => ({
const { isLoading, books } = useTypedSelector((state) => ({
isLoading: state.isLoading,
books: state.books,
}));
@ -16,7 +16,7 @@ const App: React.FC = () => {
useEffect(() => {
async function fetchData() {
const entries = await getClient().getEntries();
const books = entries.items.map(x => x.fields) as Book[];
const books = entries.items.map((x) => x.fields) as Book[];
dispatch(actions.setBooks(books));
}
@ -30,9 +30,12 @@ const App: React.FC = () => {
<div className="container mx-auto">
<h1 className="py-6 text-2xl">Books</h1>
<ul>
{books.map(book => (
{books.map((book) => (
<li key={book.title} className="py-3">
<p><span className="font-bold pr-3">{book.title}</span><span className="text-gray-600">{book.author}</span></p>
<p>
<span className="font-bold pr-3">{book.title}</span>
<span className="text-gray-600">{book.author}</span>
</p>
</li>
))}
</ul>

View file

@ -8,10 +8,10 @@ let client: ContentfulClientApi;
// Idempotent way to get a reference to the Contentful client.
export const getClient = (): ContentfulClientApi => {
if (typeof client !== 'undefined') {
if (typeof client !== "undefined") {
return client;
} else {
if (typeof space === 'string' && typeof accessToken === 'string') {
if (typeof space === "string" && typeof accessToken === "string") {
let client = createClient({
space,
accessToken,
@ -19,7 +19,9 @@ export const getClient = (): ContentfulClientApi => {
return client;
} else {
throw new Error('Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN');
throw new Error(
"Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN"
);
}
}
}
};

View file

@ -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>

View file

@ -22,9 +22,9 @@ export const { actions, reducer } = createSlice({
name: "application",
initialState,
reducers: {
toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
setBooks: (state, action) => ({ ... state, books: action.payload }),
}
toggleIsLoading: (state) => ({ ...state, isLoading: !state.isLoading }),
setBooks: (state, action) => ({ ...state, books: action.payload }),
},
});
/**

View file

@ -4,4 +4,4 @@ module.exports = {
},
variants: {},
plugins: [],
}
};

View file

@ -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/**/*"]
}