feat(prettier-config): add prettier and eslint-config-prettier

docs/.vuepress/config.js

@@ -9,6 +9,7 @@ module.exports = {
       '/guide/',
       '/recommendations/ide',
       '/recommendations/linting-eslint',
+      '/recommendations/linting-prettier',
       '/recommendations/testing',
       '/recommendations/testing-helpers',
       '/recommendations/testing-chai-dom-equals',

docs/recommendations/linting-prettier.md

@@ -0,0 +1 @@
+../../packages/prettier-config/README.md

packages/prettier-config/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 open-wc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/prettier-config/README.md

@@ -0,0 +1,51 @@
+# Linting Prettier
+
+> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/) Recommendations [open-wc](https://open-wc.org/)
+
+We want to provide a good set of defaults on how to facilitate your web component.
+
+[![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)
+[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)
+
+Uses [Prettier](https://prettier.io) to format your JS, CSS and HTML code.
+
+## Manual
+
+- Install `@open-wc/prettier-config`.
+
+```bash
+yarn add @open-wc/prettier-config --dev
+```
+
+- Create `prettier.config.js` to root directory of the project as following.
+
+```js
+module.exports = require('@open-wc/prettier-config');
+```
+
+- Add these lines to your package.json
+
+```js
+"scripts": {
+  "prettier": "prettier src/**/*.js --write"
+},
+```
+
+- Update your `.eslintrc.js` to look like this:
+
+```js
+module.exports = {
+  extends: [
+    '@open-wc/eslint-config',
+    'eslint-config-prettier'
+  ].map(require.resolve),
+};
+```
+
+## What you get
+
+- apply formatting to JS files
+- apply formatting to HTML inside of `html` tagged template literals used by [lit-html](https://github.com/Polymer/lit-html)
+- apply formatting to CSS inside of `css` tagged template literals used by [lit-css](https://github.com/lit-styles/lit-styles/tree/master/packages/lit-css)
+- integration with ESLint to prevent potentially conflicting rules

packages/prettier-config/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@open-wc/prettier-config",
+  "version": "0.0.0",
+  "description": "Prettier config following open-wc recommendations",
+  "author": "open-wc",
+  "homepage": "https://github.com/open-wc/open-wc/",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "https://github.com/open-wc/open-wc/tree/master/packages/prettier-config",
+  "main": "prettier.config.js",
+  "dependencies": {
+    "eslint-config-prettier": "^3.3.0",
+    "prettier": "^1.15.0"
+  }
+}

packages/prettier-config/prettier.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'avoid',
+};