Vite+Vue3+TypeScript
seiha.tsugeyarn create @vitejs/app my-vue-app --template vue-ts
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]
}
seiha.tsuge$ 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',
],
};
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
yarn add -D eslint-plugin-vue
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
],
}
yarn add -D 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
}
yarn add -D prettier eslint-config-prettier
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended',
+ 'prettier',
],
};
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
resolve: {
alias: {
"~": resolve(__dirname, "src"),
},
},
// ...other config,
});
seiha.tsugeyarn add vite-plugin-windicss -D
seiha.tsugeyarn add -D simple-git-hooks lint-staged
"simple-git-hooks": {
"pre-commit": "npx lint-staged"
},
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
},
warning package.json: No license field
"private": true,