目的:在用vscode編輯vue和html文件時(shí)剖效,用eslint可以同時(shí)驗(yàn)證其中的js代碼榔幸,讓其符合js standard和vue的規(guī)則。
===安裝eslint支持,都安裝在項(xiàng)目中===
cmd進(jìn)入項(xiàng)目目錄
npm init -y
npm i -D eslint
npm i -D eslint-plugin-vue
npm i -D eslint-plugin-html
npm i -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
===vscode安裝插件===
vetur佑刷,eslint箍邮, IntelliSense for CSS class names,css peek
#ctrl+shift+p
#然后eslint c糙申,在當(dāng)前項(xiàng)目中創(chuàng)建.eslintrc.json文件肝劲。
#或者開(kāi)啟optinons選項(xiàng)來(lái)引用異地的配置文件
#.eslintrc.json中必須用"html/html-extensions": [".html", ".we"],來(lái)限定eslint-plugin-html的作用范圍,因?yàn)閑slint-plugin-html與eslint-plugin-vue有沖突郭宝,不限定的話會(huì)導(dǎo)致eslint無(wú)法識(shí)別錯(cuò)誤
#同時(shí)啟用了兩個(gè)js驗(yàn)證規(guī)則:standard, eslint-plugin-vue
===.eslintrc.json===
{
? ? "env": {
? ? ? ? "browser": true,
? ? ? ? "commonjs": true,
? ? ? ? "es6": true,
? ? ? ? "node": true
? ? },
? ? "parserOptions": {
? ? ? ? "ecmaFeatures": {
? ? ? ? ? ? "jsx": true
? ? ? ? },
? ? ? ? "sourceType": "module"
? ? },
? ? "plugins": [ "html" ],
? ? "settings": {
? ? ? ? "html/html-extensions": [".html", ".we"],
? ? ? ? "html/report-bad-indent": "error"
? ? },
? ? "extends": [
? ? ? ? "standard",
? ? ? ? "plugin:vue/recommended"
? ? ],? ?
? ? "rules": {
? ? ? ? "no-const-assign": "warn",
? ? ? ? "no-this-before-super": "warn",
? ? ? ? "no-undef": "warn",
? ? ? ? "no-unreachable": "warn",
? ? ? ? "no-unused-vars": "warn",
? ? ? ? "constructor-super": "warn",
? ? ? ? "valid-typeof": "warn"
? ? }
}
===vscode自定義配置===
{
? ? "git.ignoreMissingGitWarning": true,
? ? "workbench.startupEditor": "newUntitledFile",
? ? "editor.fontSize": 16,
? ? "javascript.validate.enable": false,
? ? "files.exclude": {
? ? ? ? "**/.git": true,
? ? ? ? "**/.svn": true,
? ? ? ? "**/.hg": true,
? ? ? ? "**/CVS": true,
? ? ? ? "**/.DS_Store": true,
? ? ? ? "**/node_modules": true
? ? ? },
? ? //不增加關(guān)聯(lián),eslint-plugin-vue會(huì)產(chǎn)生重復(fù)提示
? ? "files.associations": {
? ? ? ? "*.vue": "html"
? ? },
? ? "eslint.options": {
? ? ? ? //"configFile": "F:/.eslintrc.json"
? ? },
? ? "eslint.validate": [
? ? ? ? "javascript",
? ? ? ? "javascriptreact",
? ? ? ? "html",
? ? ? ? "vue"
? ? ],
}
===刪除vscode時(shí)要清理的目錄===
C:\\Users\\ZR\AppData\\Roaming\\Code
C:\\Users\\ZR\\.vscode