.prettierrc.js
module.exports = { printWidth: 120, // 縮進字節 tabWidth: 2, // 句尾添加分號 semi: true, // 在jsx中把'>' 是否單獨放一行 jsxBracketSameLine: true, // 啓用單引號 singleQuote: true, bracketSameLine: true, // 對象,數組括號與文字之間加空格 bracketSpacing: false, // 箭頭函數單一參數省略括號 arrowParens: 'avoid', // 對象或數組末尾加逗號 trailingComma: 'es5', };
.eslintrc.js 配置如下:
{ root: true, // 當前配置爲根配置,將不再從上級文件夾查找配置 parserOptions: { parser: 'babel-eslint', // 採用 babel-eslint 作爲語法解析器 sourceType: 'module', // 指定來源的類型,有兩種script或module ecmaVersion: 6, //指定ECMAScript支持的版本,6爲ES6 }, env: { browser: true, // 設置爲所需檢查的代碼是在瀏覽器環境運行的 es6: true // 設置所需檢查代碼爲 es6 語法書寫 }, extends: ['plugin:vue/recommended', 'eslint:recommended'],// 擴展使用 vue 檢查規則和eslint推薦規則 rules: { 'vue/attribute-hyphenation': 0, // 忽略屬性連字 'vue/max-attributes-per-line':[2, { singleline: 10, multiline: { max: 1, allowFirstLine: false } }], // 每行最大屬性 'vue/singleline-html-element-content-newline': 'off', // 單行html元素內容在新的一行 'vue/multiline-html-element-content-newline': 'off', // 多行html元素內容在新的一行 'vue/html-closing-bracket-newline': 'off', // html右括號在新的一行 'vue/no-v-html': 'off', // 不使用v-html 'vue/html-self-closing': 0, // 忽略html標籤自閉合 'accessor-pairs': 2, // 應同時設置setter和getter 'arrow-spacing': [2, { before: true, after: true }], // 箭頭間距 'vue/require-default-prop': 0, // 不檢查默認屬性 'vue/require-prop-types': 0, // 不檢查默認類型 'block-spacing': [2, 'always'], // 塊間距 'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括號樣式允許單行 'camelcase': [2, { properties: 'always' }], //爲屬性強制執行駝峯命名 'comma-dangle': [2, 'never'], // 逗號不使用懸掛 'comma-spacing': [2, { before: false, after: true }], // 逗號間距 'comma-style': [2, 'last'], //(默認)與數組元素,對象屬性或變量聲明在同一行之後和同一行需要逗號 'constructor-super': 2, 'consistent-this': [2, 'that'], //強制this別名爲that 'curly': [2, 'multi-line'], // 當一個塊只包含一條語句時,不允許省略花括號。 'dot-location': [2, 'property'], //成員表達式中的點應與屬性部分位於同一行 'eol-last': 2, // 強制文件以換行符結束(LF) 'eqeqeq': ['error', 'always', { null: 'ignore' }], // 強制使用全等 'generator-star-spacing': [2, { before: true, after: true }], // 生成器中'*'兩側都要有間距 'global-require': 1, // 所有調用require()都位於模塊的頂層 'indent': [2, 2, { SwitchCase: 2 }], //縮進風格 'key-spacing': [2, { beforeColon: false, afterColon: true }], // 強制在對象字面量屬性中的鍵和值之間保持一致的間距 'keyword-spacing': [2, { before: true, after: true }], // 關鍵字如if/function等的間距 'new-cap': [2, { newIsCap: true, capIsNew: false }],// 允許在沒有new操作符的情況下調用大寫啓動的函數;(默認)要求new使用大寫啓動函數調用所有操作符 'new-parens': 2, // JavaScript通過new關鍵字調用函數時允許省略括號 'no-array-constructor': 1, // 不允許使用Array構造函數。除非要指定生成數組的長度 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開發環境可以使用console 'no-class-assign': 2, // 不允許修改類聲明的變量 'no-const-assign': 2, // 不能修改使用const關鍵字聲明的變量 'no-control-regex': 0, // 不允許正則表達式中的控制字符 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開發環境可以使用debugger 'no-delete-var': 2, // 不允許在變量上使用delete操作符 'no-dupe-args': 2, // 不允許在函數聲明或表達式中使用重複的參數名稱 'no-dupe-class-members': 2, // 不允許在類成員中使用重複的參數名稱 'no-dupe-keys': 2, // 不允許在對象文字中使用重複鍵 'no-duplicate-case': 2, // 不允許在switch語句的case子句中使用重複的測試表達式 'no-empty-character-class': 2, // 不允許在正則表達式中使用空字符類 'no-empty-pattern': 2, // 不允許空塊語句 'no-eval': 2, // 不允許使用eval 'no-ex-assign': 2, // 不允許在catch子句中重新分配例外 'no-extend-native': 2, // 不允許直接修改內建對象的原型 'no-extra-boolean-cast': 2, // 禁止不必要的布爾轉換 'no-extra-parens': [2, 'functions'], // 僅在函數表達式附近禁止不必要的括號 'no-fallthrough': 2, //消除一個案件無意中掉到另一個案件 'no-floating-decimal': 2, //消除浮點小數點,並在數值有小數點但在其之前或之後缺少數字時發出警告 'no-func-assign': 2, // 允許重新分配function聲明 'no-implied-eval': 2, // 消除隱含eval() 'no-inner-declarations': [2, 'functions'], // 不允許function嵌套塊中的聲明 'no-invalid-regexp': 2, //不允許RegExp構造函數中的無效正則表達式字符串 'no-irregular-whitespace': 2, //捕獲無效的空格 'no-iterator': 2, //消除陰影變量聲明 'no-label-var': 2, //禁止創建與範圍內的變量共享名稱的標籤 'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 消除 JavaScript 中使用帶標籤的語句 '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-new-object': 2, // 不允許使用Object構造函數 'no-new-require': 2, // 消除new require表達的使用 'no-new-symbol': 2, // 防止Symbol與new 同時使用的意外錯誤 'no-new-wrappers': 2, // 杜絕使用String,Number以及Boolean與new操作 'no-obj-calls': 2, // 不允許調用Math,JSON和Reflect對象作爲功能 'no-octal': 2, // 不允許使用八進制文字 'no-octal-escape': 2, // 不允許字符串文字中的八進制轉義序列 'no-path-concat': 2, // 防止 Node.js 中的目錄路徑字符串連接無效 'no-redeclare': 2, // 消除在同一範圍內具有多個聲明的變量 'no-regex-spaces': 2, // 在正則表達式文字中不允許有多個空格 'no-return-assign': [2, 'except-parens'], // 消除return陳述中的任務,除非用括號括起來 'no-self-assign': 2, // 消除自我分配 'no-self-compare': 2, // 禁止比較變量與自身 'no-sequences': 2, // 禁止使用逗號運算符 'no-sparse-arrays': 2, // 不允許稀疏數組文字 'no-this-before-super': 2, // 在呼call前標記this/super關鍵字super() 'no-throw-literal': 2, // 不允許拋出不可能是Error對象的文字和其他表達式 'no-trailing-spaces': 2, // 不允許在行尾添加尾隨空白 'no-undef': 2, // 任何對未聲明的變量的引用都會導致錯誤 'no-undef-init': 2, // 消除初始化爲undefined的變量聲明 'no-underscore-dangle': 2, // 標識符不能以_開頭或結尾 'no-unexpected-multiline': 2, // 不允許混淆多行表達式 'no-unmodified-loop-condition': 2, // 查找循環條件內的引用,然後檢查這些引用的變量是否在循環中被修改 'no-unneeded-ternary': [2, { defaultAssignment: false }], // 不允許將條件表達式作爲默認的分配模式 'no-unreachable': 2, // 不允許可達代碼return,throw,continue,和break語句後面還有語句。 'no-unsafe-finally': 2, // 不允許return,throw,break,和continue裏面的語句finally塊 'no-unused-vars': [2, { vars: 'all', args: 'after-used' }], // 消除未使用的變量,函數和函數的參數 // vars: 'all' 檢查所有變量的使用情況,包括全局範圍內的變量。這是默認設置。 args: 'after-used' 只有最後一個參數必須使用。例如,這允許您爲函數使用兩個命名參數,並且只要您使用第二個參數,ESLint 就不會警告您第一個參數。這是默認設置。 'no-useless-call': 2, // 標記使用情況,Function.prototype.call()並且Function.prototype.apply()可以用正常的函數調用來替代 'no-useless-computed-key': 2, // 禁止不必要地使用計算屬性鍵 'no-useless-constructor': 2, // 在不改變類的工作方式的情況下安全地移除的類構造函數 'no-useless-escape': 0, // 禁用不必要的轉義字符 'no-whitespace-before-property': 2, // 如果對象的屬性位於同一行上,不允許圍繞點或在開頭括號之前留出空白 'no-with': 2, //禁用with 'no-var': 2, // 禁用var 'one-var': [2, { initialized: 'never' }], // 強制將變量聲明爲每個函數(對於var)或塊(對於let和const)範圍一起聲明或單獨聲明。 initialized: 'never' 每個作用域要求多個變量聲明用於初始化變量 'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 實施一致的換行 'padded-blocks': [2, 'never'], // 在塊內強制執行一致的空行填充 'prefer-destructuring': ['error', { object: false, array: false }], // 此規則強制使用解構而不是通過成員表達式訪問屬性。 'quotes': [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],// avoidEscape: true 允許字符串使用單引號或雙引號,只要字符串包含必須以其他方式轉義的引號 ;allowTemplateLiterals: true 允許字符串使用反引號 'radix': 2, //parseInt必須指定第二個參數 'semi': [2, 'never'], // 不使用分號 'semi-spacing': [2, { before: false, after: true }], // 強制分號間隔 'space-before-blocks': [2, 'always'], // 塊必須至少有一個先前的空間 'space-before-function-paren': [2, 'never'], // 在(參數後面不允許任何空格 'space-in-parens': [2, 'never'], // 禁止或要求(或)左邊的一個或多個空格 'space-infix-ops': 2, // 強制二元運算符左右各有一個空格 'space-unary-ops': [2, { words: true, nonwords: false }],// words: true 如:new,delete,typeof,void,yield 左右必須有空格 // nonwords: false 一元運算符,如:-,+,--,++,!,!!左右不能有空格 'spaced-comment': [2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 註釋開始後,此規則將強制間距的一致性//或/* 'template-curly-spacing': [2, 'never'], // 不允許大括號內的空格 'use-isnan': 2, //禁止比較時使用NaN,只能用isNaN() 'valid-typeof': 2, //必須使用合法的typeof的值 'wrap-iife': [2, 'any'], //立即執行函數表達式的小括號風格 'yield-star-spacing': [2, 'both'], // 強制執行*周圍 yield*表達式的間距,兩側都必須有空格 'yoda': [2, 'never'], 'prefer-const': 2, // 使用let關鍵字聲明的變量,但在初始分配後從未重新分配變量,應改爲const聲明 'object-curly-spacing': [2, 'always', { objectsInObjects: false }],// 不允許以對象元素開始和/或以對象元素結尾的對象的大括號內的間距 'array-bracket-spacing': [2, 'never'] // 不允許數組括號內的空格 } }
settings.json
{ "editor.fontSize": 12, "editor.tabSize": 2, "editor.fontFamily": "'FiraCode-Retina', Menlo, Monaco, 'Courier New', monospace", // 每次保存的時候將代碼按格式進行修復 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnPaste": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "files.exclude": { "**/.DS_Store": true, "**/.git": true, "**/.hg": true, "**/.svn": true, "**/bower_components": true, "**/CVS": true, "**/node_modules": true, "**/tmp": true }, "files.watcherExclude": { "**/.git/objects/**": true, "**/.git/subtree-cache/**": true, "**/node_modules/**": true, "**/tmp/**": true, "**/bower_components/**": true, "**/dist/**": true }, "files.associations": { ".editorconfig": "javascript", "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "git.autofetch": true, "gitlens.advanced.messages": { "suppressCommitHasNoPreviousCommitWarning": false, "suppressCommitNotFoundWarning": false, "suppressFileNotUnderSourceControlWarning": false, "suppressGitVersionWarning": false, "suppressLineUncommittedWarning": false, "suppressNoRepositoryWarning": false, "suppressResultsExplorerNotice": false, "suppressShowKeyBindingsNotice": true }, "search.followSymlinks": false, "window.zoomLevel": 1, "debug.node.autoAttach": "on", "workbench.iconTheme": "material-icon-theme", "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // 禁用vetur的JS格式化,交給eslint處理 // "vetur.format.defaultFormatter.js": "none", // "vetur.format.defaultFormatter.css": "none", // "vetur.format.defaultFormatter.scss": "none", // 如果要自行配置 ESLint 規則,請關閉 Vetur 的模板校驗, // "vetur.validation.template": false, // prettier格式化代碼 // "prettier.tabWidth": 2, // "prettier.useTabs": false, // "prettier.semi": true, // "prettier.printWidth": 160, // "prettier.trailingComma": "es5", // "prettier.singleQuote": true, // "prettier.arrowParens": "always", // "prettier.htmlWhitespaceSensitivity": "ignore", // eslint規則 "eslint.run": "onSave", "eslint.validate": ["javascript", "javascriptreact", "html", "vue"], "eslint.workingDirectories": [ ".eslintrc.js", { "mode": "auto" } ], "vue3snippets.enable-compile-vue-file-on-did-save-code": true }