vue3安装eslint和prettier,最简单的步骤

 第1步:

安装eslint

yarn add eslint -D

 第2步:

在根文件夹中,创建.eslintrc.js文件

 第3步:

在package.json文件中新增命令

 "lint": "eslint --fix --ext .ts,.tsx,.vue src --quiet",
 "prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\""

第4步:

安装eslint-plugin-vue

yarn add eslint-plugin-vue -D

第5步:

安装prettier

yarn add add prettier -D

 第6步:

在根文件夹创建 .prettierrc.js文件

第7步:

安装eslint-config-prettier

yarn add eslint-config-prettier -D

第8步:

安装eslint-plugin-prettier

yarn add eslint-plugin-prettier -D

第9步:

在.eslintrc.js文件中粘贴下面代码

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" //放最后面 eslint-config-prettier插件用来禁止eslint中所有格式规则
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {}
};

第10步:

在.prettierrc.js文件中粘贴下面代码

module.exports = {
  singleQuote: false, // 使用双引号
  semi: true, // 末尾添加分号 var a=1
  tabWidth: 2, //tab代码2个空格
  trailingComma: "none", // {a:1,}是否使用尾逗号,有三个可选值"
  useTabs: false,
  endOfLine: "auto",
  bracketSpacing: true //对象括号里是否有空格,默认为true,效果:{ foo: bar }
};

第11步:

在vscode插件中,安装eslint插件,安装prettier插件

第12步:

 点击vscode的设置

第13步:

点击控制面板

第14步:

输入Preferences:Open Workspace Settings(JSON),为项目新建 .vscode/settings.json 文件

第15步:

粘贴下面的代码


{
  //下面是eslint的设置
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
 
  //下面是prettier的设置
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"//将prettier设置为默认格式化工具
}

 第16步:

关闭vscode , 重新启动vscode,这样就全设置好了,html标签,script里的代码,style里的代码都会在保存时格式化

你可能感兴趣的:(前端,javascript,vue.js,代码格式化)