VS Code环境配置Vue篇

在VS Code中，配置适合Vue的开发环境；
安装prettier插件, 并且在settings.json中,做出如下配置

settings.json配置

// 编辑器设置
"editor.tabSize": 2,
"editor.fontLigatures": true,
"editor.formatOnSave": true,
"editor.renderWhitespace": "none",
"editor.renderControlCharacters": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.rendererType": "dom",
"window.zoomLevel": 0,
"minapp-vscode.disableAutoConfig": true,

// 代码格式化设置
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.arrowParens": "avoid",
"prettier.endOfLine": "auto",
// 配置js的文档格式化工具
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.format.defaultFormatterOptions": {
// vetur新版本不会读取prettier的配置, 需要在这里设置
"prettier": {
"singleQuote": true,
"semi": false,
"trailingComma": "all"
}
},
"emmet.includeLanguages": {
"wxml": "html"
},
"javascript.implicitProjectConfig.experimentalDecorators": true,
"css.fileExtensions": ["css", "scss", "vue"],
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},

.prettierrc配置

{
 "eslintIntegration": true,
 "singleQuote": true,
 "semi": false,
 "trailingComma": "all"
}

.eslintrc.js配置

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    // 'plugin:prettier/recommended'
  ],
  plugins: ['vue'],
  rules: {
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
    'vue/no-unused-vars': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 'no-unused-vars': 'off',
    'vue/require-default-prop': 'off',
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
    // 'vue/max-attributes-per-line': 'off',
    'vue/html-self-closing': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    // 'vue/html-indent': 'off',
    'vue/attribute-hyphenation': 'off',
    // 允许 catch 为空代码块
    'no-empty': [
      'error',
      {
        allowEmptyCatch: true,
      },
    ],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
}