jlengrand/open-wc
1
0
Fork 0
mirror of https://github.com/jlengrand/open-wc.git synced 2026-03-10 08:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: linting generators & documentation

Browse Source
This commit is contained in:
Thomas Allmer
2018-12-20 12:01:46 +01:00
parent c9e573bb06
commit 5c29f7a853
19 changed files with 279 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.vuepress/config.js
View File

@@ -8,6 +8,7 @@ module.exports = {
sidebar: [
'/guide/',
'/recommendations/ide',
'/recommendations/linting',
'/recommendations/linting-eslint',
'/recommendations/linting-prettier',
'/recommendations/testing',

2
docs/guide/README.md
View File

@@ -15,7 +15,7 @@ npx -p yo -p generator-open-wc -c 'yo open-wc:vanilla'
## Available Recommendations
- [IDE](/recommendations/ide.html)
- [Linting](/recommendations/linting-eslint.html)
- [Linting](/recommendations/linting.html)
- [Testing](/recommendations/testing.html)
- [Demos](/recommendations/demos-storybook.html)
- [Publishing](/recommendations/publishing.html)

84
docs/recommendations/linting.md Normal file
View File

@@ -0,0 +1,84 @@
# Linting
In order to write consistent code it's good to have strict linting rules.
Also these rules should be checked and applied in an automatic manner.
We recommend
- [ESLint](https://eslint.org/) to lint your es6 code
- [Prettier](https://prettier.io/) to auto format your code
- [lint-staged](https://www.npmjs.com/package/lint-staged) to apply linting fixed only to changed files
- [commitlint](https://www.npmjs.com/package/@commitlint/cli) so commit messages follow a certain flow
## Setup
```bash
npx -p yo -p generator-open-wc -c 'yo open-wc:lint'
```
::: tip Info
This is part of the default [open-wc](https://open-wc.org/) recommendation
:::
### Manual
- `yarn add --dev @open-wc/eslint-config @open-wc/prettier-config lint-staged husky @commitlint/cli @commitlint/config-conventional`
- copy [.eslintignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-eslint/templates/static/.eslintignore) to `.eslintignore`
- copy [.eslintrc.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/static/.eslintrc.js) to `.eslintrc.js`
- copy [.prettierignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/static/.prettierignore) to `.prettierignore`
- copy [prettier.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/_prettier.config.js) to `prettier.config.js`
- copy [husky.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint/templates/static/husky.config.js) to `husky.config.js`
- copy [commitlint.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-commitlint/templates/static/commitlint.config.js) to `commitlint.config.js`
- add these scripts to your package.json
```js
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
},
"scripts": {
"lint": "npm run lint:eslint && npm run lint:prettier",
"lint:eslint": "eslint --ext .js,.html .",
"lint:prettier": "prettier '**/*.js' --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
"format": "npm run format:eslint && npm run format:prettier",
"format:eslint": "eslint --ext .js,.html . --fix",
"format:prettier": "prettier '**/*.js' --write"
},
```
## What you get
- linting and auto formatting using eslint & prettier
- full automatic linting for changed files on commit
- linting commit message
## Usage
Run:
- `npm run lint` to check if any file is not correctly formatted
- `npm run format` to auto format your files
Whenever you create a commit the update files will be auto formatted and the commit message will be linted.
## Linting Error Examples
```bash
$ npm run lint:prettier
test/set-card.test.js
test/set-game.test.js
↑↑ these files are not prettier formatted ↑↑
```
So just run `npm run format:prettier` to format those files automatically.
```bash
$ npm run lint:eslint
/.../example-vanilla-set-game/set-card.js
14:11 error 'foo' is assigned a value but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
```
If you are using eslint and prettier togeter most eslint errors will not be auto fixable.
This means usually you will need to pick up an editor and actually fix the problem in code.

5
package.json
View File

@@ -6,7 +6,10 @@
"bootstrap": "lerna bootstrap --hoist --no-ci",
"lint": "run-p lint:*",
"lint:eslint": "eslint --ext .js,.html .",
"lint:prettier": "prettier packages/**/*.js --write",
"lint:prettier": "prettier '**/*.js' --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
"format": "npm run format:eslint && npm run format:prettier",
"format:eslint": "eslint --ext .js,.html . --fix",
"format:prettier": "prettier '**/*.js' --write",
"publish": "lerna publish --message 'chore: release new versions'",
"site:build": "npm run vuepress:build",
"site:start": "npm run vuepress:start",

23
packages/eslint-config/README.md
View File

@@ -20,16 +20,16 @@ This is part of the default [open-wc](https://open-wc.org/) recommendation
:::
### Manual
- `yarn add @open-wc/eslint-config --dev`
- `yarn add --dev @open-wc/eslint-config`
- copy [.eslintignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-eslint/templates/static/.eslintignore) to `.eslintignore`
- copy [.eslintrc.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-eslint/templates/static/.eslintrc.js) to `.eslintrc.js`
- add these scripts to your package.json
```js
"scripts": {
"lint": "npm run lint:eslint",
"lint:eslint": "eslint --ext .js,.html ."
},
```
```js
"scripts": {
"lint:eslint": "eslint --ext .js,.html .",
"format:eslint": "eslint --ext .js,.html . --fix"
},
```
## What you get
@@ -41,7 +41,8 @@ This will install `@open-wc/eslint-config`. A config based on airbnb but allow f
- do not prefer default exports
- do not prefer no file extension
## Run
```bash
npm run lint:eslint
```
## Usage
Run:
- `npm run lint:eslint` to check if any file is not correctly formatted
- `npm run format:eslint` to auto format your files

20
packages/generator-open-wc/generators/lint-commitlint/index.js Normal file
View File

@@ -0,0 +1,20 @@
const Generator = require('yeoman-generator');
module.exports = class GeneratorLintCommitlint extends Generator {
writing() {
// extend package.json
this.fs.extendJSON(
this.destinationPath('package.json'),
this.fs.readJSON(this.templatePath('_package.json')),
);
// write everything else
this.fs.copyTpl(
this.templatePath('static/**/*'),
this.destinationPath(),
this.config.getAll(),
undefined,
{ globOptions: { dot: true } },
);
}
};

6
packages/generator-open-wc/generators/lint-commitlint/templates/_package.json Normal file
View File

@@ -0,0 +1,6 @@
{
"devDependencies": {
"@commitlint/cli": "^7.0.0",
"@commitlint/config-conventional": "^7.0.0"
}
}

3
packages/generator-open-wc/generators/lint-commitlint/templates/static/commitlint.config.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
extends: ['@commitlint/config-conventional'],
};

4
packages/generator-open-wc/generators/lint-eslint/templates/_package.json
View File

@@ -1,7 +1,7 @@
{
"scripts": {
"lint": "npm run lint:eslint",
"lint:eslint": "eslint --ext .js,.html ."
"lint:eslint": "eslint --ext .js,.html .",
"format:eslint": "eslint --ext .js,.html . --fix"
},
"devDependencies": {
"@open-wc/eslint-config": "^0.3.0"

25
packages/generator-open-wc/generators/lint-prettier/index.js Normal file
View File

@@ -0,0 +1,25 @@
const Generator = require('yeoman-generator');
module.exports = class GeneratorLintPrettier extends Generator {
writing() {
// extend package.json
this.fs.extendJSON(
this.destinationPath('package.json'),
this.fs.readJSON(this.templatePath('_package.json')),
);
this.fs.copy(
this.templatePath('_prettier.config.js'),
this.destinationPath('prettier.config.js'),
);
// write everything else
this.fs.copyTpl(
this.templatePath('static/**/*'),
this.destinationPath(),
this.config.getAll(),
undefined,
{ globOptions: { dot: true } },
);
}
};

9
packages/generator-open-wc/generators/lint-prettier/templates/_package.json Normal file
View File

@@ -0,0 +1,9 @@
{
"scripts": {
"lint:prettier": "prettier '**/*.js' --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
"format:prettier": "prettier '**/*.js' --write"
},
"devDependencies": {
"@open-wc/prettier-config": "^0.1.0"
}
}

2
packages/generator-open-wc/generators/lint-prettier/templates/_prettier.config.js Normal file
View File

@@ -0,0 +1,2 @@
/* eslint-disable import/no-extraneous-dependencies */
module.exports = require('@open-wc/prettier-config');

3
packages/generator-open-wc/generators/lint-prettier/templates/static/.eslintrc.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
extends: ['@open-wc/eslint-config', 'eslint-config-prettier'].map(require.resolve),
};

3
packages/generator-open-wc/generators/lint-prettier/templates/static/.prettierignore Normal file
View File

@@ -0,0 +1,3 @@
node_modules
coverage/
_site/

26
packages/generator-open-wc/generators/lint/index.js Normal file
View File

@@ -0,0 +1,26 @@
const Generator = require('yeoman-generator');
module.exports = class GeneratorLint extends Generator {
default() {
this.composeWith(require.resolve('../lint-eslint'), this.config.getAll());
this.composeWith(require.resolve('../lint-prettier'), this.config.getAll());
this.composeWith(require.resolve('../lint-commitlint'), this.config.getAll());
}
writing() {
// extend package.json
this.fs.extendJSON(
this.destinationPath('package.json'),
this.fs.readJSON(this.templatePath('_package.json')),
);
// write everything else
this.fs.copyTpl(
this.templatePath('static/**/*'),
this.destinationPath(),
this.config.getAll(),
undefined,
{ globOptions: { dot: true } },
);
}
};

17
packages/generator-open-wc/generators/lint/templates/_package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
},
"scripts": {
"lint": "npm run lint:eslint && npm run lint:prettier",
"format": "npm run format:eslint && npm run format:prettier"
},
"devDependencies": {
"husky": "^1.0.0",
"lint-staged": "^8.0.0"
}
}

6
packages/generator-open-wc/generators/lint/templates/static/husky.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
hooks: {
'pre-commit': 'lint-staged',
'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
},
};

14
packages/generator-open-wc/generators/publish-storybook/templates/static/.storybook/webpack.config.js
View File

@@ -16,15 +16,17 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => {
if (rule.exclude) {
for (let j = 0; j < rule.exclude.length; j += 1) {
if (rule.exclude[j] === path.resolve('node_modules')) {
rule.exclude[j] = (modulePath) => {
return /node_modules/.test(modulePath) &&
!/node_modules\/lit-html/.test(modulePath) &&
!/node_modules\/@open-wc/.test(modulePath);
}
rule.exclude[j] = modulePath => {
return (
/node_modules/.test(modulePath) &&
!/node_modules\/lit-html/.test(modulePath) &&
!/node_modules\/@open-wc/.test(modulePath)
);
};
}
}
}
}
return defaultConfig;
};
};

73
packages/prettier-config/README.md
View File

@@ -10,38 +10,41 @@ We want to provide a good set of defaults on how to facilitate your web componen
Uses [Prettier](https://prettier.io) to format your JS, CSS and HTML code.
::: tip Info
This is part of the default [open-wc](https://open-wc.org/) recommendation
:::
## Setup
```bash
npx -p yo -p generator-open-wc -c 'yo open-wc:lint-prettier'
```
## Manual
- Install `@open-wc/prettier-config`.
```bash
yarn add @open-wc/prettier-config --dev
```
```bash
yarn add --dev @open-wc/prettier-config
```
- Create `prettier.config.js` to root directory of the project as following.
```js
module.exports = require('@open-wc/prettier-config');
```
```js
module.exports = require('@open-wc/prettier-config');
```
- Add these lines to your package.json
```js
"scripts": {
"prettier": "prettier src/**/*.js --write"
},
```
```js
"scripts": {
"lint:prettier": "prettier '**/*.js' --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
"format:prettier": "prettier '**/*.js' --write",
},
```
- Update your `.eslintrc.js` to look like this:
```js
module.exports = {
extends: [
'@open-wc/eslint-config',
'eslint-config-prettier'
].map(require.resolve),
};
```
```js
module.exports = {
extends: [
'@open-wc/eslint-config',
'eslint-config-prettier'
].map(require.resolve),
};
```
## What you get
@@ -49,3 +52,21 @@ module.exports = {
- 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
## Usage
Run:
- `npm run lint:prettier` to check if any file is not correctly formatted
- `npm run format:prettier` to auto format your files
## Linting Error Examples
```bash
$ npm run lint:prettier
test/set-card.test.js
test/set-game.test.js
↑↑ these files are not prettier formatted ↑↑
```
So just run `npm run format:prettier` to format those files automatically.