vscode中配置eslint+vetur+prettier實現儲存時自動格式化並修復
首先安裝vscode的elinst、vetur、prettier外掛
然後設定setting.json檔案
{
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.gist": "95334f62cb3f660374fb11d0603264bd",
"workbench.iconTheme": "vscode-icons",
"editor.renameOnType": true,
"editor.renderIndentGuides": false,
"vsicons.projectDetection.autoReload": true,
"vsicons.dontShowNewVersionMessage": true,
"workbench.colorTheme": "Visual Studio Dark",
"search.followSymlinks": false,
"git.autofetch": true,
"window.zoomLevel": 1,
"git.enableSmartCommit": true,
"liveServer.settings.donotShowInfoMsg": true,
"files.autoSave": "afterDelay", // 開啟自動儲存
"editor.formatOnSave": true, // 每次儲存的時候自動格式化
"editor.lineNumbers": "on", //開啟行數提示
"editor.quickSuggestions": {
//開啟自動顯示建議
"other": true,
"comments": true,
"strings": true
},
"editor.detectIndentation": false, // vscode預設啟用了根據檔案型別自動設定tabsize的選項
"editor.tabSize": 2, //製表符符號eslint
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.run": "onSave",
"eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true //儲存自動修復, eslint.autoFixOnSave已廢棄
},
"prettier.useTabs": false, //使用製表符縮排
"prettier.semi": false, //去掉程式碼結尾的分號
"prettier.singleQuote": true, //使用單引號替代雙引號
"prettier.trailingComma": "none", //去除物件最末尾元素跟隨的逗號
"prettier.printWidth": 200, //指定程式碼長度,超出換行
"prettier.requireConfig": false, //需要prettier.requireConfig格式化
"prettier.useEditorConfig": false,
"prettier.eslintIntegration": true, //不讓prettier使用eslint的程式碼格式進行校驗
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函式(名)和後面的括號之間加個空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //屬性強制折行對齊
}
}
}
配置.eslintrc.js檔案
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
"vue/html-self-closing": ["error",{
"html": {
"void": "always",
"normal": "always",
"component": "always"
},
"svg": "always",
"math": "always"
}],
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'camelcase': [0, {
'properties': 'always'
}],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': ["error", "always", {"null": "ignore"}],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
'semi': [2, 'never'],
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [0, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}
配置package.json檔案
{
"name": "vue-admin-template",
"version": "1.0.0",
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
"author": "Pan <panfree23@gmail.com>",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
"dependencies": {
"axios": "0.18.1",
"core-js": "3.6.5",
"echarts": "4.2.1",
"element-ui": "2.13.2",
"file-saver": "2.0.1",
"jquery": "^3.5.1",
"js-cookie": "2.2.0",
"js-md5": "^0.7.3",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"vue": "2.6.10",
"vue-count-to": "1.0.13",
"vue-router": "3.0.6",
"vuex": "3.1.0",
"xlsx": "0.14.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
"@vue/cli-plugin-eslint": "4.4.4",
"@vue/cli-plugin-unit-jest": "4.4.4",
"@vue/cli-service": "4.4.4",
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "9.5.1",
"babel-eslint": "10.1.0",
"babel-jest": "23.6.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "2.4.2",
"connect": "3.6.6",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"html-webpack-plugin": "3.2.0",
"mockjs": "1.0.1-beta3",
"runjs": "4.3.2",
"sass": "1.26.8",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-template-compiler": "2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"license": "MIT"
}
相關文章
- vscode-rustfmt:Rust儲存時自動格式化的Vscode外掛VSCodeRust
- 解決vscode 中儲存後html自動格式化的問題VSCodeHTML
- vscode使用stylelint儲存自動格式化程式碼VSCode
- 【webstorm】vue前端專案配置儲存時自動格式化程式碼 - prettierWebORMVue前端
- VsCode讀取專案檔案的Eslint規則 儲存時自動修復格式錯誤VSCodeEsLint
- vscode配置vue的自動格式化VSCodeVue
- vue Eslint 自動修復 in VscodeVueEsLintVSCode
- 自研資料庫CynosDB儲存系統如何實現即時恢復資料庫
- IntelliJ IDEA啟用Eslint儲存自動程式碼修復IntelliJIdeaEsLint
- vscode的一個配置項editor.formatOnPaste,貼上時自動格式化VSCodeORMAST
- Eclipse 儲存檔案時自動格式化程式碼的設定Eclipse
- vsCode自動格式化文件VSCode
- 自動儲存、靜態儲存和動態儲存
- wps自動儲存時間設定在哪裡 WPS如何設定自動儲存
- Eslint 在phpstrom/Webstrom 中配置自動修復EsLintPHPWeb
- iOS APP執行時Crash自動修復系統iOSAPP
- 如何給Infopath表單儲存時自動命名和自動關閉
- PHPStorm 儲存時自動執行 PHP CS FixerPHPORM
- 讓PPT文件儲存時自動壓縮圖片
- vs code配置vue自動格式化Vue
- 啟動SQL SERVER時自動執行儲存過程(轉)SQLServer儲存過程
- MySQL 中儲存時間的最佳實踐MySql
- word自動儲存的檔案怎麼恢復,word檔案恢復
- win10自動修復無法修復你的電腦 華碩win10自動修復無法開機Win10
- win10系統啟動時跳過自動修復的方法Win10
- Vscode內實現vue程式碼格式化VSCodeVue
- Sublime Text 中配置 Eslint 程式碼檢查和自動修復EsLint
- 交換機統一監控和遠端控制:自動發現、自動監控、自動告警、自動修復
- 硬碟使用驅動器中的光碟之前需要將其格式化修復方法?硬碟
- 在 Java 中運用動態掛載實現 Bug 的熱修復Java
- DATAGUARD監控,保護和自動修復最佳實踐
- 使用Vscode外掛SQLTools自動格式化SQL語句VSCodeSQL
- win10怎麼跳過自動修復 win10自動修復進不了系統Win10
- 用 System.Reflection.Emit 來自動生成呼叫儲存過程的實現MIT儲存過程
- [開源]Android逆向中So模組自動化修復工具+實戰一發Android
- 使用Java實現在SQLserver中實現圖片的儲存JavaSQLServer
- 金蝶雲星空——關於Webapi儲存介面同時自動稽核WebAPI
- SingleFile 自動儲存設定