Open8

Vite+Vue3+TypeScript

Dockerfile

FROM node:14.16.0-alpine

WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn

COPY . /app

CMD ["/bin/ash"]

docker-compose.yml

version: "3.8"
services:
web:
container_name: container_name
build: .
ports:
- 3000:3000
volumes:
- .:/app
- /app/node_modules
stdin_open: true
tty: true

devcontainer.json

{
"name": "name",
"dockerComposeFile": ["../docker-compose.yml"],
"service": "web",
"workspaceFolder": "/app",
"settings": {
"editor.tabSize": 2
},
"extensions": [
"octref.vetur"
],
"forwardPorts": [3000]
}

$ yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Getting Started - Linting your TypeScript Codebase
ESLint Plugin TypeScript

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

Configuration

File is a CommonJS module; it may be converted to an ES6 module.ts(80001)
'module' is not defined.eslintno-undef

env: {
  node: true,
},

module.exports を使っているファイルがエラーになる

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage

Ignoring unnecessary files

yarn add -D eslint-plugin-vue

Installation

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
  ],
}

Configuration

yarn add -D vue-eslint-parser

vuejs / vue-eslint-parser

module.exports = {
  - parser: '@typescript-eslint/parser',
  + parser: 'vue-eslint-parser'
  + parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020,
    sourceType: "module",
  },
};

parseroptionsparser
What is the "Use the latest vue-eslint-parser" error?

  "scripts": {
    "lint": "yarn eslint . --ext .js,.ts,.vue"
  },
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

microsoft / vscode-eslint

yarn add -D prettier eslint-config-prettier
  module.exports = {
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:vue/vue3-recommended',
+     'prettier',
    ],
  };

Usage with prettier

  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },

prettier / prettier-vscode

yarn add -D simple-git-hooks lint-staged
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  },

okonet / lint-staged

warning package.json: No license field
"private": true,
作成者以外のコメントは許可されていません