vscode Prettier - Code formatter插件+eslint js Standar 保存自动格式化

最近开发项目需要用到eslint 但是手动格式化太麻烦了 发现eslint配置Prettier 能自动格式化 感觉就是神器啊 但是不能格式化template Standar还是可以的 不知道其他版本怎么样 1.安装 Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 2.配置setting

settings.json

// eslint 配置 "eslint.enable": true, "workbench.colorCustomizations": {}, "eslint.autoFixOnSave": true, "eslint.options": { "extensions": [ ".ts", ".js", ".jsx", ".vue" ] }, "eslint.validate": [ "typescript", "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], //prettire //js文件验证 "[javascript]": { "editor.formatOnSave": true } //开启对ts的文件验证 "[typescript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "vscode.typescript-language-features" }, // 使用单引号 "prettier.singleQuote": true, // 不带尾随逗号 "prettier.trailingComma": "none", // 语句结尾不加分号 "prettier.semi": false, //代码缩进为2格 "prettier.tabWidth": 2, "editor.quickSuggestions": { "strings": true },

.eslintc.js 

module.exports = { root: true, env: { browser: true, node: true, es6: true }, parserOptions: { parser: '@typescript-eslint/parser', sourceType: 'module' }, plugins: [ 'vue' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', "camelcase": 0, 'space-before-function-paren': [2, 'never'], 'vue/array-bracket-spacing': 'error', 'vue/arrow-spacing': 'error', 'vue/block-spacing': 'error', 'vue/brace-style': 'error', 'vue/camelcase': 'error', 'vue/comma-dangle': 'error', 'vue/component-name-in-template-casing': 'error', 'vue/eqeqeq': 'error', 'vue/key-spacing': 'error', 'vue/match-component-file-name': 'error', 'vue/object-curly-spacing': 'error', // 'indent': [1, 4], // 'vue/script-indent': [ // 'error', // 4, // { // 'baseIndent': 1 // } // ] }, 'extends': [ 'eslint:recommended', 'plugin:vue/recommended', '@vue/standard', '@vue/typescript' ] }

package.json 

"devDependencies": { "@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-e2e-cypress": "^3.8.0", "@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-plugin-pwa": "^3.8.0", "@vue/cli-plugin-typescript": "^3.8.1", "@vue/cli-plugin-unit-jest": "^3.8.0", "@vue/cli-service": "^3.8.4", "@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-typescript": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.29", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.2", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.2.2", }