初衷: 在没有固定的我的项目模版之前；每次新建我的项目之后配置代码格调都须要来回粘贴；并且有时候粘贴了也不失效；故总结成文档；不便之后间接应用

介绍

  • ESLint 是JavaScript和JSX查看工具
  • prettier 代码格式化工具

装置依赖

#装置 eslintnpm install --save-dev eslint eslint-plugin-vue#装置 prettiernpm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier#装置 typescript 反对npm install --save-dev @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

配置文件

  1. 根目录新建 .eslintrc.js 文件
module.exports = {  root: true,  env: {    browser: true,    // 必填    node: true,    es2021: true  },  parser: 'vue-eslint-parser',  extends: [    'eslint:recommended',    'plugin:vue/vue3-recommended',    'plugin:@typescript-eslint/recommended',    'plugin:prettier/recommended',    // eslint-config-prettier 的缩写    'prettier'  ],  parserOptions: {    ecmaVersion: 12,    parser: '@typescript-eslint/parser',    sourceType: 'module',    ecmaFeatures: {      jsx: true    }  },  // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写  plugins: ['vue', '@typescript-eslint', 'prettier'],  rules: {    'prettier/prettier': [      'error',      {        singleQuote: true,        semi: false,        trailingComma: 'none',        arrowParens: 'avoid',        printWidth: 160      }    ],    'no-undef': 'off',    'vue/multi-word-component-names': [      'error',      {        ignores: []      }    ],    'vue/v-on-event-hyphenation': 0 // html上的事件容许驼峰格局phoneCallback  },  globals: {    defineProps: 'readonly',    defineEmits: 'readonly',    defineExpose: 'readonly',    withDefaults: 'readonly'  }}
  1. 根目录新建 .eslintignore 配置疏忽文件
.vscode.idea.localindex.html!.env-config.tscomponents.d.ts/node_modules//public/
  1. 根目录新建 .prettierrc.js
module.exports = {  printWidth: 160, // 单行输入（不折行）的（最大）长度    tabWidth: 2, // 每个缩进级别的空格数    tabs: false, // 应用制表符 (tab) 缩进行而不是空格 (space)    semi: false, // 是否在语句开端打印分号    singleQuote: true, // 是否应用单引号  quoteProps: 'as-needed', // 仅在须要时在对象属性四周增加引号    bracketSpacing: true, // 是否在对象属性增加空格    htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的    trailingComma: 'none', // 去除对象最开端元素追随的逗号    useTabs: false, // 不应用缩进符，而应用空格    jsxSingleQuote: false, // jsx 不应用单引号，而应用双引号    // arrowParens: 'always', // 箭头函数，只有一个参数的时候，也须要括号    rangeStart: 0, // 每个文件格式化的范畴是文件的全部内容    proseWrap: 'always', // 当超出print width（下面有这个参数）时就折行    endOfLine: 'lf', // 换行符应用 lf  "max-lines-per-function": [ 2, { max: 320, skipComments: true, skipBlankLines: true }, ] // 每个函数最大行数}

vscode保留并主动格式化

  • 装置编译器 ESLint 插件
  • 批改vscode配置
{    "editor.formatOnSave": true, // 1    "editor.codeActionsOnSave": {        "source.fixAll.eslint": true    },    "eslint.format.enable": true}

完结

保留即可主动格局；如不失效；重启编译器～