ci: add lint job

.circleci/config.yml

@@ -11,8 +11,8 @@ jobs:
 
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "yarn.lock" }}
-          - v1-dependencies-
+            - v1-dependencies-{{ checksum "yarn.lock" }}
+            - v1-dependencies-
 
       - run: yarn --frozen-lockfile
 
@@ -23,3 +23,31 @@ jobs:
           key: v1-dependencies-{{ checksum "yarn.lock" }}
 
       - run: yarn test --ci --runInBand
+
+  lint:
+    docker:
+      - image: vuejs/ci
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "yarn.lock" }}
+            - v1-dependencies-
+
+      - run:
+          name: Installing Dependencies
+          command: yarn --frozen-lockfile
+
+      - save_cache:
+          paths:
+            - node_modules
+            - ~/.cache/yarn
+          key: v1-dependencies-{{ checksum "yarn.lock" }}
+
+      - run:
+          name: Linting Code Style
+          command: npx prettier --check "**/*.{ts,js,json,yaml,md,css}"

.github/commit-convention.md

@@ -6,7 +6,8 @@
 
 Messages must be matched by the following regex:
 
-``` js
+<!-- prettier-ignore -->
+```js
 /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip)(\(.+\))?: .{1,50}/
 ```
 
@@ -44,7 +45,7 @@ This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
 
 ### Full Message Format
 
-A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
+A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
 
 ```
 <type>(<scope>): <subject>
@@ -58,7 +59,7 @@ The **header** is mandatory and the **scope** of the header is optional.
 
 ### Revert
 
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
 
 ### Type
 
@@ -74,9 +75,9 @@ The scope could be anything specifying the place of the commit change. For examp
 
 The subject contains a succinct description of the change:
 
-* use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize the first letter
-* no dot (.) at the end
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- don't capitalize the first letter
+- no dot (.) at the end
 
 ### Body
 

.github/contributing.md

@@ -19,10 +19,12 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 - Checkout a topic branch from a base branch, e.g. `master`, and merge back against that branch.
 
 - If adding a new feature:
+
   - Add accompanying test case.
   - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it.
 
 - If fixing bug:
+
   - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.
   - Provide a detailed description of the bug in the PR. Live demo preferred.
   - Add appropriate test coverage if applicable. You can check the coverage of your code addition by running `yarn test --coverage`.
@@ -41,7 +43,7 @@ You will need [Node.js](http://nodejs.org) **version 10+**, and [Yarn](https://y
 
 After cloning the repo, run:
 
-``` bash
+```bash
 $ yarn # install the dependencies of the project
 ```
 
@@ -61,7 +63,7 @@ The `build` script builds all public packages (packages without `private: true`
 
 Packages to build can be specified with fuzzy matching:
 
-``` bash
+```bash
 # build runtime-core only
 yarn build runtime-core
 
@@ -78,13 +80,13 @@ By default, each package will be built in multiple distribution formats as speci
 
 For example, to build `runtime-core` with the global build only:
 
-``` bash
+```bash
 yarn build runtime-core -f global
 ```
 
 Multiple formats can be specified as a comma-separated list:
 
-``` bash
+```bash
 yarn build runtime-core -f esm,cjs
 ```
 
@@ -100,7 +102,7 @@ The `--types` flag will generate type declarations during the build and in addit
 
 The `dev` script bundles a target package (default: `vue`) in a specified format (default: `global`) in dev mode and watches for changes. This is useful when you want to load up a build in an HTML page for quick debugging:
 
-``` bash
+```bash
 $ yarn dev
 
 > rollup v1.19.4
@@ -115,7 +117,7 @@ $ yarn dev
 
 The `yarn test` script simply calls the `jest` binary, so all [Jest CLI Options](https://jestjs.io/docs/en/cli) can be used. Some examples:
 
-``` bash
+```bash
 # run all tests
 $ yarn test
 
@@ -160,7 +162,7 @@ This project uses a [monorepo](https://github.com/lerna/lerna#about) structure a
 
 Note that when importing these packages, the `@vue/` prefix is needed:
 
-``` js
+```js
 import { h } from '@vue/runtime-core'
 ```
 

.prettierrc

@@ -1,3 +1,16 @@
 semi: false
 singleQuote: true
 printWidth: 80
+overrides:
+  - files: "*.ts"
+    parser: typescript
+  - files: "*.js"
+    parser: babel
+  - files: "*.json"
+    parser: json-stringify
+  - files: "*.yaml,.prettierrc"
+    parser: yaml
+  - files: "*.md"
+    parser: markdown
+  - files: "*.css"
+    parser: css

README.md

@@ -5,6 +5,7 @@
 We have achieved most of the architectural goals and new features planned for v3:
 
 - Compiler
+
   - [x] Modular architecture
   - [x] "Block tree" optimization
   - [x] More aggressive static tree hoisting

packages/compiler-dom/README.md

@@ -1 +1 @@
-# @vue/compiler-dom
+# @vue/compiler-dom

packages/compiler-dom/api-extractor.json

@@ -4,4 +4,4 @@
   "dtsRollup": {
     "untrimmedFilePath": "./dist/<unscopedPackageName>.d.ts"
   }
-}
+}

packages/compiler-dom/package.json

@@ -13,7 +13,11 @@
   "sideEffects": false,
   "buildOptions": {
     "name": "VueDOMCompiler",
-    "formats": ["cjs", "global", "esm-browser"]
+    "formats": [
+      "cjs",
+      "global",
+      "esm-browser"
+    ]
   },
   "repository": {
     "type": "git",

packages/compiler-dom/src/transforms/vOn.ts

@@ -41,7 +41,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
   if (
     // if event name is dynamic, always wrap with keys guard
     key.type === NodeTypes.COMPOUND_EXPRESSION ||
-    !(key.isStatic) ||
+    !key.isStatic ||
     key.content.toLowerCase() in KEYBOARD_EVENTS
   ) {
     handler = createCallExpression(context.helper(V_ON_KEYS_GUARD), [

packages/reactivity/package.json

@@ -17,7 +17,12 @@
   },
   "buildOptions": {
     "name": "VueObserver",
-    "formats": ["esm", "cjs", "global", "esm-browser"]
+    "formats": [
+      "esm",
+      "cjs",
+      "global",
+      "esm-browser"
+    ]
   },
   "keywords": [
     "vue"

packages/runtime-core/README.md

@@ -6,14 +6,14 @@ For full exposed APIs, see `src/index.ts`. You can also run `yarn build runtime-
 
 ## Building a Custom Renderer
 
-``` ts
+```ts
 import { createRenderer, createAppAPI } from '@vue/runtime-core'
 
 const { render, createApp } = createRenderer({
   pathcProp,
   insert,
   remove,
-  createElement,
+  createElement
   // ...
 })
 

packages/runtime-core/__tests__/apiCreateComponent.spec.tsx

@@ -67,7 +67,7 @@ test('createComponent type inference', () => {
     }
   })
   // test TSX props inference
-  ;(<MyComponent a={1} b="foo" dd={['foo']} ddd={['foo']}/>)
+  ;<MyComponent a={1} b="foo" dd={['foo']} ddd={['foo']} />
 })
 
 test('type inference w/ optional props declaration', () => {
@@ -85,14 +85,14 @@ test('type inference w/ optional props declaration', () => {
       return h('div', this.msg)
     }
   })
-  ;(<Comp msg="hello"/>)
+  ;<Comp msg="hello" />
 })
 
 test('type inference w/ direct setup function', () => {
   const Comp = createComponent((props: { msg: string }) => {
     return () => <div>{props.msg}</div>
   })
-  ;(<Comp msg="hello"/>)
+  ;<Comp msg="hello" />
 })
 
 test('type inference w/ array props declaration', () => {
@@ -113,7 +113,7 @@ test('type inference w/ array props declaration', () => {
       this.c
     }
   })
-  ;(<Comp a={1} b={2}/>)
+  ;<Comp a={1} b={2} />
 })
 
 test('with legacy options', () => {

packages/runtime-core/src/apiLifecycle.ts

@@ -50,10 +50,8 @@ function injectHook(
 
 const createHook = <T extends Function = () => any>(
   lifecycle: LifecycleHooks
-) => (
-  hook: T,
-  target: ComponentInternalInstance | null = currentInstance
-) => injectHook(lifecycle, hook, target)
+) => (hook: T, target: ComponentInternalInstance | null = currentInstance) =>
+  injectHook(lifecycle, hook, target)
 
 export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
 export const onMounted = createHook(LifecycleHooks.MOUNTED)

packages/runtime-core/src/helpers/renderList.ts

@@ -16,10 +16,7 @@ export function renderList(
     }
   } else if (isObject(source)) {
     if (source[Symbol.iterator as any]) {
-      ret = Array.from(
-        source as Iterable<any>, 
-        renderItem
-      )
+      ret = Array.from(source as Iterable<any>, renderItem)
     } else {
       const keys = Object.keys(source)
       ret = new Array(keys.length)

packages/runtime-dom/README.md

@@ -1,6 +1,6 @@
 # @vue/runtime-dom
 
-``` js
+```js
 import { h, createApp } from '@vue/runtime-dom'
 
 const RootComponent = {

packages/runtime-dom/package.json

@@ -13,7 +13,12 @@
   "sideEffects": false,
   "buildOptions": {
     "name": "VueDOMRuntime",
-    "formats": ["esm", "cjs", "global", "esm-browser"]
+    "formats": [
+      "esm",
+      "cjs",
+      "global",
+      "esm-browser"
+    ]
   },
   "repository": {
     "type": "git",

packages/runtime-dom/src/directives/vOn.ts

@@ -28,7 +28,6 @@ export const vOnModifiersGuard = (fn: Function, modifiers: string[]) => {
   }
 }
 
-
 // Kept for 2.x compat.
 // Note: IE11 compat for `spacebar` and `del` is removed for now.
 const keyNames: Record<string, string | string[]> = {

packages/runtime-test/README.md

@@ -1,6 +1,6 @@
 # @vue/runtime-test
 
-``` js
+```js
 import {
   h,
   render,
@@ -11,12 +11,12 @@ import {
 } from '@vue/runtime-test'
 
 class App extends Component {
-  data () {
+  data() {
     return {
       msg: 'Hello World!'
     }
   }
-  render () {
+  render() {
     return h('div', this.msg)
   }
 }

packages/runtime-test/package.json

@@ -15,7 +15,11 @@
   },
   "buildOptions": {
     "name": "VueTestRuntime",
-    "formats": ["esm", "cjs", "global"]
+    "formats": [
+      "esm",
+      "cjs",
+      "global"
+    ]
   },
   "keywords": [
     "vue"

packages/server-renderer/package.json

@@ -9,7 +9,9 @@
   ],
   "types": "dist/server-renderer.d.ts",
   "buildOptions": {
-    "formats": ["cjs"]
+    "formats": [
+      "cjs"
+    ]
   },
   "repository": {
     "type": "git",