VS Code环境配置Vue篇

Posted 2021-09-15 dragonishare

在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\',
  },
}