Add Prettier, stylelint, and adjust linting command

Author: anselmbradford

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true
+}
+

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": false
+}
+

package.json

@@ -19,7 +19,7 @@
   "scripts": {
     "build": "node scripts/build.js",
     "dev-flow": "node scripts/test.js --env=jsdom --coverage --watch",
-    "lint": "yarn eslint ./src --ext .jsx --fix",
+    "lint": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,json,md}\" --write && yarn eslint ./src --fix && yarn stylelint \"src/**/*.{css,less}\" --fix",
     "release": "yarn run build && release-it --only-version --npm.skipChecks",
     "start": "node scripts/start.js",
     "test": "node scripts/test.js --env=jsdom --coverage"
@@ -80,6 +80,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.26.0",
@@ -111,11 +112,14 @@
     "object-assign": "4.1.1",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "pnp-webpack-plugin": "^1.7.0",
+    "postcss": "^8.4.16",
     "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-less": "^6.0.0",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
+    "prettier": "^2.7.1",
     "promise": "8.0.1",
     "prop-types": "^15.5.10",
     "query-string": "^5.0.0",
@@ -140,6 +144,8 @@
     "semver": "6.3.0",
     "string-replace-loader": "^1.2.0",
     "style-loader": "1.0.0",
+    "stylelint": "^14.11.0",
+    "stylelint-config-recommended-less": "^1.0.4",
     "terser-webpack-plugin": "^5.3.6",
     "ts-pnp": "1.1.2",
     "url-loader": "2.1.0",

src/App.jsx

@@ -1,38 +1,36 @@
-import './css/App.less'
-import { applyMiddleware, createStore } from 'redux'
-import {
-  Route,
-  BrowserRouter as Router,
-  Switch
-} from 'react-router-dom'
-import ComplaintDetail from './components/ComplaintDetail'
-import { composeWithDevTools } from 'redux-devtools-extension'
-import { IntlProvider } from 'react-intl'
-import { Provider } from 'react-redux'
-import queryManager from './middleware/queryManager'
-import React from 'react'
+import './css/App.less';
+import { applyMiddleware, createStore } from 'redux';
+import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
+import ComplaintDetail from './components/ComplaintDetail';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import { IntlProvider } from 'react-intl';
+import { Provider } from 'react-redux';
+import queryManager from './middleware/queryManager';
+import React from 'react';
 // Required so that the expose-loader test works which moves the ReactDOM
 // variable into the global space
 // eslint-disable-next-line
-import ReactDOM from 'react-dom'
-import reducers from './reducers'
-import SearchComponents from './components/Search/SearchComponents'
-import thunkMiddleware from 'redux-thunk'
+import ReactDOM from 'react-dom';
+import reducers from './reducers';
+import SearchComponents from './components/Search/SearchComponents';
+import thunkMiddleware from 'redux-thunk';
 
-const middleware = [ thunkMiddleware, queryManager ];
+const middleware = [thunkMiddleware, queryManager];
 
-const composeEnhancers = composeWithDevTools( {
+const composeEnhancers = composeWithDevTools({
   // required for redux-devtools-extension
   // Specify name here, actionsBlacklist, actionsCreators and other options
   // if needed
-} )
+});
 
 // required format for redux-devtools-extension
-const store = createStore( reducers, composeEnhancers(
-  applyMiddleware( ...middleware ),
-  // other store enhancers if any
-) )
-
+const store = createStore(
+  reducers,
+  composeEnhancers(
+    applyMiddleware(...middleware)
+    // other store enhancers if any
+  )
+);
 
 /* eslint-disable camelcase */
 
@@ -43,10 +41,10 @@ export class DetailComponents extends React.Component {
     return (
       <IntlProvider locale="en">
         <main role="main">
-          <ComplaintDetail complaint_id={complaint_id}/>
+          <ComplaintDetail complaint_id={complaint_id} />
         </main>
       </IntlProvider>
-    )
+    );
   }
 }
 
@@ -58,8 +56,8 @@ export class App extends React.Component {
       <Provider store={store}>
         <Router>
           <Switch>
-            <Route path="*/detail/:id" component={DetailComponents}/>
-            <Route path="/" component={SearchComponents}/>
+            <Route path="*/detail/:id" component={DetailComponents} />
+            <Route path="/" component={SearchComponents} />
           </Switch>
         </Router>
       </Provider>

src/__tests__/App.spec.jsx

@@ -1,19 +1,18 @@
 import { act, create } from 'react-test-renderer';
 import { App, DetailComponents } from '../App';
-import configureMockStore from 'redux-mock-store'
-import { defaultQuery } from '../reducers/query'
+import configureMockStore from 'redux-mock-store';
+import { defaultQuery } from '../reducers/query';
 import { MemoryRouter } from 'react-router';
-import { Provider } from 'react-redux'
+import { Provider } from 'react-redux';
 import React from 'react';
-import thunk from 'redux-thunk'
+import thunk from 'redux-thunk';
 import 'regenerator-runtime/runtime';
 
-jest.mock( 'highcharts/modules/accessibility' )
-jest.mock( 'highcharts/highmaps' )
+jest.mock('highcharts/modules/accessibility');
+jest.mock('highcharts/highmaps');
 
 describe('initial state', () => {
   it('renders without crashing', async () => {
-
     // set the date so snapshot will always be the same.
     const DATE_TO_USE = new Date('1/1/2016');
     const _Date = Date;
@@ -23,32 +22,31 @@ describe('initial state', () => {
     global.Date.now = _Date.now;
     defaultQuery.searchText = 'foo';
 
-    let target
-    await act( async () => {
+    let target;
+    await act(async () => {
       target = create(
-        <MemoryRouter initialEntries={[ '/' ]}>
+        <MemoryRouter initialEntries={['/']}>
           <App />
         </MemoryRouter>
-      )
-    } )
+      );
+    });
 
     let tree = target.toJSON();
     expect(tree).toMatchSnapshot();
-
   });
 
   it('renders the detail route', () => {
-    const middlewares = [thunk]
-    const mockStore = configureMockStore(middlewares)
+    const middlewares = [thunk];
+    const mockStore = configureMockStore(middlewares);
     const store = mockStore({
-      detail: { data: {}, error: '' }
-    })
+      detail: { data: {}, error: '' },
+    });
 
     const match = { params: { id: '1234' } };
     const detailTarget = create(
-      <MemoryRouter initialEntries={[ '/detail/1234' ]}>
+      <MemoryRouter initialEntries={['/detail/1234']}>
         <Provider store={store}>
-          <DetailComponents match={ match }/>
+          <DetailComponents match={match} />
         </Provider>
       </MemoryRouter>
     );