[开发工具]vscode格式化配置

vscode格式化配置

1. 准备

   安装插件eslint、prettier - Code formatter、vetur

2. 配置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"
         }
   }
   

3. .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'
     }
   }
   

4. .prettierrc.js – 项目格式化配置

   module.exports = {
     // 一行最多 120 字符
     // printWidth: 100,
     // 行尾需要有分号
     semi: false,
     // 使用单引号
     singleQuote: true,
     // 末尾不需要逗号
     trailingComma: 'none',
     // 大括号内的首尾需要空格
     bracketSpacing: true,
   	// 使用默认的折行标准
     proseWrap: 'preserve'
   }