|
@@ -12,10 +12,16 @@ With built-in:
|
|
According to [this](https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project) you are able to install community plugins as follows:
|
|
According to [this](https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project) you are able to install community plugins as follows:
|
|
|
|
|
|
```shell
|
|
```shell
|
|
-npm remove @vue/cli-plugin-eslint # or see Troubleshooting
|
|
|
|
vue add coffee
|
|
vue add coffee
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+__ESLINT Note__: Please visit "EsLint Integration" Section below on how to make this plugin work with eslint (else, it will return errors on coffeescript code).
|
|
|
|
+If you don't need eslint, you can just uninstall it.
|
|
|
|
+```shell
|
|
|
|
+# ONLY if you don't need eslint
|
|
|
|
+npm remove @vue/cli-plugin-eslint
|
|
|
|
+```
|
|
|
|
+
|
|
## Common usage
|
|
## Common usage
|
|
|
|
|
|
Usually you write SFC like this
|
|
Usually you write SFC like this
|
|
@@ -53,6 +59,19 @@ module.exports = {
|
|
|
|
|
|
```
|
|
```
|
|
|
|
|
|
-## Troubleshooting
|
|
|
|
|
|
+## Eslint Integration
|
|
|
|
+If you're using ESLint, note that vue-loader uses `lang="coffee"` to identify components which are using Coffeescript, but `lang="coffee"` is not recognizable for ESLint.
|
|
|
|
+
|
|
|
|
+There are 2 ways on how you can make this plugin work with eslint:
|
|
|
|
|
|
-If you're using ESLint, note that vue-loader uses `lang="coffee"` to identify components which are using Coffeescript, but `lang="coffee"` is not recognizable for ESLint. Fortunately, ESLint (following traditional HTML) uses `type="xxx"` to identify the type of scripts. As long as a `<script>` tag has any type other than javascript, ESLint would mark the script as non-javascript, and skips linting it. Coffeescript’s convention is to use `type="text/coffeescript"` to identify itself. Therefore, in your Vue components which are using Coffeescript, using both `lang` and `type` to avoid ESLint warnings.
|
|
|
|
|
|
+1. __Coffeescript ESLint Support__
|
|
|
|
+https://github.com/helixbass/eslint-plugin-coffee
|
|
|
|
+
|
|
|
|
+2. __Ignore Coffeescript Syntax__
|
|
|
|
+ESLint (following traditional HTML) uses `type="xxx"` to identify the type of scripts. As long as a `<script>` tag has any type other than javascript, ESLint would mark the script as non-javascript, and skips linting it. Coffeescript’s convention is to use `type="text/coffeescript"` to identify itself. Therefore, in your Vue components which are using Coffeescript, using both `lang` and `type` to avoid ESLint warnings.
|
|
|
|
+Example:
|
|
|
|
+```vue
|
|
|
|
+<script lang="coffee" type="text/coffeescript">
|
|
|
|
+ console.log "This code is ignored by eslint, but executed by the coffeescript compiler"
|
|
|
|
+</script>
|
|
|
|
+```
|