vscode格式化配置
-
准备
安装插件eslint、prettier - Code formatter、vetur
-
配置setting.json
{ "files.autoSave": "onFocusChange", "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.sass": "sass-formatter", "eslint.validate": ["javascript", "javascriptreact", "vue"], "vetur.format.defaultFormatterOptions": { "prettier": { // Prettier option here "trailingComma": "es5", // 多行时,尽可能打印尾随的逗号 "tabWidth": 2, // 会忽略vetur的tabSize配置 "useTabs": false, // 是否利用tab替代空格 "semi": false, // 句尾是否加; "singleQuote": true, // 使用单引号而不是双引号 "arrowParens": "avoid" // allow paren-less arrow functions 箭头函数的参数使用圆括号 } }, "editor.formatOnSave": false, // 在保存时自动格式化 "editor.formatOnType": false, // 在键入一行后是否自动化格式 "editor.formatOnPaste": false, // 在粘贴时自动格式化 "editor.wordWrap": "off", // 换行规则,off 永不换行 "editor.detectIndentation": false, // vscode 默认是启用根据文件类型自动设置 tabSize 的值 "editor.tabSize": 2, "editor.insertSpaces": false, // 保存时按照哪个规则进行格式化 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
-
.eslinttrc.js – 项目配置校验规则
module.exports = { root: true, env: { browser: true, es6: true, node: true }, 'extends': [ 'eslint:recommended', 'plugin:vue/recommended', '@vue/standard' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'quotes': ['error', 'single'], 'semi': ['error', 'never'], 'no-extra-semi': 'error', 'vue/html-end-tags': 'error', 'vue/require-default-prop': 'off', 'vue/require-prop-types': 'error', 'vue/attributes-order': 'error', 'vue/order-in-components': 'error', 'vue/html-indent': ['error', 2], 'vue/attribute-hyphenation': ['error', 'always'], 'vue/html-quotes': ['error', 'double'], 'vue/arrow-spacing': ['error', { 'before': true, 'after': true }], 'vue/block-spacing': ['error', 'always'], 'vue/component-name-in-template-casing': ['error', 'kebab-case', { 'registeredComponentsOnly': true, 'ignores': [] }], 'vue/eqeqeq': ['error', 'always'], 'handle-callback-err': ['error', '^(err|error)$'] }, parserOptions: { parser: 'babel-eslint' } }
-
.prettierrc.js – 项目格式化配置
module.exports = { // 一行最多 120 字符 // printWidth: 100, // 行尾需要有分号 semi: false, // 使用单引号 singleQuote: true, // 末尾不需要逗号 trailingComma: 'none', // 大括号内的首尾需要空格 bracketSpacing: true, // 使用默认的折行标准 proseWrap: 'preserve' }