vscode 配置eslint 開發vue的相關配置
如何在vscode中用JavaScript Standard Style風格去驗證 vue檔案
實際上JavaScript Standard Style有一個FAQ, 說明了如何使用。
但是有一點非常重要的作者沒有提到，就是eslint-plugin-html這個外掛必須要安裝3.x.x版本的, 現在eslint-plugin-html, 已經升級到4.x版本，預設不寫版本號安裝的就是4.x版本的，所以會出現問題。
參考：詳情請參考https://www.npmjs.com/package...
此ESLint外掛允許linting和修復HTML檔案中包含的內聯指令碼。
遷移到v4
eslint-plugin-htmlv4至少需要ESLint v4.7。這是因為ESLint v4.7中發生了許多內部更改，包括支援前處理器中自動固定的新API。如果您仍在使用舊版本的ESLint，請考慮升級或繼續使用 eslint-plugin-htmlv3。
eslint-plugin-htmlv4中的重要特性（和重大變化）是能夠選擇在同一HTML檔案中的指令碼標記之間共享範圍的方式。
遷移到v3
如果您正在考慮升級到v3，請閱讀本指南。
ESLint v4 is only supported by eslint-plugin-html v3, so you can't use eslint-plugin-html v1.5.2 with it (I should add a warning about this when trying to use the plugin with an incompatible version on ESLint).
If you do not use ESLint v4, please provide more information (package.json, a gist to reproduce, ...)
// FAQ
How to lint script tag in vue or html files?
You can lint them with eslint-plugin-html, just install it first, then enable linting for those file types in settings.json with:
{
"standard.validate": [
"javascript",
"javascriptreact",
"html"
],
"standard.options": {
"plugins": ["html"]
},
"files.associations": {
"*.vue": "html"
}
}
If you want to enable autoFix for the new languages, you should enable it yourself:
{"standard.validate": [
"javascript",
"javascriptreact",
{ "language": "html", "autoFix": true }
],
"standard.options": {
"plugins": ["html"]
}
}
1、需要安裝外掛：
npm i -g standard
npm i -g [email protected] 此處使用是3x版本
npm i -g eslint 或者 vscode 安裝 eslint
2 、vscode setting 設定：
{
"standard.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
}
],
"standard.options": {
"plugin": ["html"]
},
"files.associations": {
"*.vue": "html"
},
"standard.autoFixOnSave": true
}
3、vscode 相關外掛 Prettierand eslint 格式化程式碼：
ESLint (如果全域性安裝了,vscode 可以不安裝)
Prettier formatter
Vetur
#4 格式化程式碼相關設定
{
"files.autoSave": "afterDelay",
"editor.fontSize": 14,
"editor.tabSize": 2,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
{
"language": "html",
"autoFix": true
}
],
"prettier.singleQuote": true,
"prettier.semi": false,
"editor.formatOnSave": true
}
5 .eslintrc.js 相關
專案根目錄下建立 .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
'extends': [
// 需要官方的 eslint-plugin-vue，它支援同時檢查你 .vue 檔案中的模板和指令碼。請確保在你的 ESLint 配置中使用了該外掛自身的配置：
'plugin:vue/essential',
// standard 程式碼規範https://github.com/standard/standard/blob/master/docs/RULES-en.md
'@vue/standard'
],
rules: {
'no-new-func':0,
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 解決 iview 報錯問題
"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
},
parserOptions: {
parser: 'babel-eslint'
}