-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
posts/vite-vue3-typescript/ #34
Comments
In config path alias, using |
Thanks for the comment! This article is a bit old. It was correct at the time this article was written, but there have been changes. I will update the entire article soon. |
I update latest |
Thank you for this article, it's very useful! Just a note, right near the end it looks like the code block isn't closed properly, here: |
@DanielOaks Thanks for the comment! |
Hello, thanks for the article. Why the TS part is crossed ? |
@JohnPAfr Thanks for the comment.
The |
@TomokiMiyauci I've follow the article but I encountered a problem at the Path Alias part. Module 'path' cannot be found in "import { resolve } from 'patht'". And also Same for __dirname in the resolve. I'm on a Mac. Any idea ? |
@JohnPAfr You can try the following: npm i -D @types/node
// or
yarn add -D @types/node I need to update the article. Thanks for the report. |
Hello ! First, thanks, it's a nice tutorial ! I have a little issue: |
Oh ! nevermind, I found the soluce. It is needed to restart the eslint server in vs-code, and it did the trick. |
When adding the line "@vue/prettier/@typescript-eslint" to the extends array in the aslant config file, I receive an error:
Is this a typo, or am I missing something? Thanks for putting together such a great article! |
@jimmiejackson414 |
@TomokiMiyauci sure thing! .eslintrc.js: module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
],
parserOptions: {
ecmaVersion: 2021,
},
plugins: [],
rules: {},
}; package.json: {
"name": "vue3-vite-test",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1",
"@vitejs/plugin-vue": "^2.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"eslint": "^8.7.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.3.0",
"prettier": "^2.5.1",
"stylelint": "^14.3.0",
"stylelint-config-recommended": "^6.0.0",
"stylelint-config-standard": "^24.0.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
}
}
|
Sorry for the inconvenience.There was a typo in the article. Also, starting with eslint-config-prettier So all you have to do is just delete module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
],
parserOptions: {
ecmaVersion: 2021,
},
plugins: [],
rules: {},
}; |
Ah perfect, thank you so much! |
Hello and thanks for your work ! I have just a little issue with next command : npm run prettier -w -u . I have the following result :
My package.json : {
"name": "yggtorrentchecker",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"lint:script": "eslint --ext .ts,vue --ignore-path .gitignore .",
"lint:markup": "vue-tsc --noEmit"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@types/node": "^17.0.14",
"@typescript-eslint/eslint-plugin": "^5.10.2",
"@typescript-eslint/parser": "^5.10.2",
"@vitejs/plugin-vue": "^2.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.8.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-tailwindcss": "^3.4.3",
"eslint-plugin-vue": "^8.4.1",
"husky": "^7.0.4",
"lint-staged": "^12.3.3",
"postcss": "^8.4.6",
"prettier": "^2.5.1",
"tailwindcss": "^3.0.18",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,vue}": "eslint --fix",
"*": "prettier -w -u"
}
} |
npm: 7.24.0Try the following command. npm exec -- prettier -w -u . It seems that |
Super ! Thanks a lot ! |
nice article. i have a issue. use tsx to write Component, the vscode show some errors: const style = {
width: '200px',
height: '37px',
}
const Button = defineComponent({
setup(props, { slots }) {
console.log('*****slots')
console.log(slots)
const { default: _default, left, right } = slots
return () => (
<button style={style}>
{left ? left() : null}
{_default ? _default() : 'BUTTON'}
{right ? right() : null}
</button>
)
},
})
export default Button error: my tsconfig.json: {
"compilerOptions": {
"target": "ES2015",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowJs": true,
"strict": false,
"jsx": "preserve",
"typesRoot": ["./node_modules/@types", "./types"],
"sourceMap": true,
// "strictNullChecks": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"baseUrl": "src",
"paths": {
"@/*": ["./*"],
"#c": ["./components/index"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/**/*.js",
"auto-imports.d.ts",
"src/test-lit.js"
],
"references": [{ "path": "./tsconfig.node.json" }]
} How to fix it? |
Building a Vue3 Typescript Environment with Vite | miyauci.me
Building a Typescript Vue3 environment using the No bundle tool Vite, along with ESLint and Prettier configuration to create a high DX environment.
https://miyauchi.dev/posts/vite-vue3-typescript/?utterances=8cc08b6fb9c2c533386c60bafrSa3H3e4ah8V%2BEUrswZK5CjMoTjXCs7C07Bn9GHZ0j4CY4jjajLKX5iLpzCYEWiOADy8aV%2B8LMKELdLdKf6NL%2BDYBMm1yJsanLdt%2FAeL69T18a7JnFuyGeWAxk%3D
The text was updated successfully, but these errors were encountered: