Front-end project configuration eslint+vscode formatting (2)

Prettier-code Formatter +Vetur install ESLint + prettier-code formatter+Vetur

Modify vscode to configure settings.json

{
  "editor.formatOnSave": true."breadcrumbs.enabled": true."editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true.// For TSLint
    "source.fixAll.tslint": true.// For Stylelint
    "source.fixAll.stylelint": true
  },
  "vetur.ignoreProjectWarning": true."vetur.format.defaultFormatter.html": "prettyhtml"."vetur.format.defaultFormatter.pug": "prettier"."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"."vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true."semi": false."trailingComma": "none"."eslintIntegration": true."tslintIntegration": true}},"files.autoSave": "afterDelay"."files.exclude": {
    "node_modules": true
  },
  "eslint.format.enable": true.// Whether to enable VScode eslint
  "editor.defaultFormatter": "esbenp.prettier-vscode"."javascript.updateImportsOnFileMove.enabled": "always"."editor.unicodeHighlight.ambiguousCharacters": false."bracketPairColorizer.depreciation-notice": false."editor.unicodeHighlight.allowedCharacters": {
    "": true}}Copy the code

Json format file in the root directory of the project. Prettierrc. json

{
  "tabWidth": 2.// Indent the number of bytes
  "endOfLine": "auto".// It ends with \n\r \n\r auto
  "printWidth": 120.// Over the maximum line break
  "proseWrap": "preserve".// Default value. Folds markdown text style due to the use of some fold-sensitive renderer (such as GitHub Comment)
  "quoteProps": "as-needed".// The key of the object is quoted only when necessary
  "semi": true.// Add a semicolon at the end of a sentence
  "singleQuote": true.// Use single quotes instead of double quotes
  "trailingComma": "none".// Whether to place a comma after the last element of an object or array (as in ES5)
  "useTabs": false.// Indent instead of TAB, use Spaces
  "arrowParens": "always".// (x) => {} arrow function with only one argument whether to have parentheses. Avoid: omit parentheses
  "bracketSpacing": true.// Add a space between the object, array bracket and text "{foo: bar}"
  "eslintIntegration": true.// Use ESLint for formatting verification
  "vueIndentScriptAndStyle": true // Whether to indent the code inside the 
}
Copy the code