Comments (10)
The new PR is up and waiting feedback/approval: #77
For a quick install into your current Vue project (to see it working):
npm install git://github.com/prograhammer/fork-ts-checker-webpack-plugin.git#vue --save-dev
See this post further up this thread for instructions on Webpack config and more.
from fork-ts-checker-webpack-plugin.
This actually can be accomplished by overriding default host behavior with host.resolveModuleNames
(just like it is already being done in host.getSourceFile
in the source here). Since the .vue
file is not going to be processed through vue-loader
, I'm using a parser to get the AST and strip out the typescript. This might need to be optimized later, but my PR should get it working for everyone eagerly waiting vue support!
Stay tuned, I working on a PR now and should be done by tomorrow-ish!
from fork-ts-checker-webpack-plugin.
For anyone else following this thread, you can use this plugin right away with npm install git://github.com/prograhammer/fork-ts-checker-webpack-plugin.git#temp --save-dev
. Check back in a week and we'll have the PR merged or I'll just put it on npm
so we can all just get back to writing Vue apps!
from fork-ts-checker-webpack-plugin.
Alright! I found how to get it to work fully on .vue
files (without need to go the route of .vue.ts
).
It's working in my vscode extension fork: TSLint Vue. So now I can release a new working PR here. Stay tuned!
from fork-ts-checker-webpack-plugin.
Thanks. When PR is ready, I will will include it as soon as possible in my vue webpack template fork https://github.com/Toilal/vue-webpack-template to test this.
from fork-ts-checker-webpack-plugin.
Hi @Toilal
You can see the PR here: #77
For a quick test, I created a vue
branch (out of the feature/vue
branch) with the built lib
folder included. So you can install like this:
npm install git://github.com/prograhammer/fork-ts-checker-webpack-plugin.git#vue --save-dev
- Turn on the vue option in the plugin in your webpack config:
new ForkTsCheckerWebpackPlugin({
tslint: true,
vue: true
})
- For linting to work in
.vue
files, you need to ensure your script tag's language attribute is set
tots
ortsx
(also make sure you include the.vue
extension in all your import statements as shown below):
<script lang="ts">
import Hello from '@/components/hello.vue'
// ...
</script>
- If you are testing in Webpack, (in addition to this plugin) you'll need something like this in your rules:
{
test: /\.ts$/,
loader: 'ts-loader',
include: [resolve('src'), resolve('test')],
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
- I also currently use tslint-config-standard so my
tslint.json
looks something like:
{
"defaultSeverity": "error",
"extends": [
"tslint-config-standard"
]
}
- Ensure your
tsconfig.json
doesn't exclude .vue files:
// tsconfig.json
{
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
}
}
If you are working in VSCode, you'll need extensions Vetur and TSLint Vue (a forked extension which I also currently maintain) and the editor will match the output you get from this fork-ts-checker-webpack-plugin
.
from fork-ts-checker-webpack-plugin.
I just found a critical problem that I'm working to fix. It looks like the .vue
file has to be referenced somewhere in the import dependency chain that leads back to the entry point (ie. main.ts
). It is also having problems with relative path imports of .vue
files. I somehow missed this before PR. Working on it...
from fork-ts-checker-webpack-plugin.
Exciting!!
from fork-ts-checker-webpack-plugin.
I seem to be able to build and run my app with and without the vue: true
option. What exactly does it do?
from fork-ts-checker-webpack-plugin.
this adds TypeScript type checking and TSLint to vue SFC.
from fork-ts-checker-webpack-plugin.
Related Issues (20)
- Configuration has an unknown property 'resolveTypeReferenceDirectiveModule'. HOT 1
- Incremental mode is not working in webpack devServer
- Solution Builder should set reportDiagnostic on build mode
- error: debug failure. false expression HOT 3
- Update `minimatch` to Latest and Update Import
- Uncaught Exception in yaml - A dependency update is required for `cosmiconfig`
- Use specific lerna module tsconfig on type checking HOT 2
- Emitted files should be added as assets to the compilation HOT 5
- Getting ERROR in compiler.getInfrastructureLogger is not a function HOT 2
- Issues when importing plugin in TypeScript (`index.d.ts` vs `plugin.d.ts`)
- TypeError: config.logger.log is not a function HOT 3
- extends should be an array in typescript 5.0 HOT 2
- Github Actions module 'Ajv' not found HOT 1
- overlay: false not working HOT 1
- Does it respect @ts-nocheck ? HOT 1
- Performance loss between latest and v6.5.3
- class IssueWebpackError extends webpack_1.default.WebpackError when run webpack build
- Type check is slow in incremental mode on watch mode's subsequent runs (not on the first run).
- Fork-ts-checker >= 6 hangs on windows
- `TypeError: Cannot set property mark of #<Object> which has only a getter` HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fork-ts-checker-webpack-plugin.