背景之前公司项目用的nuxt是开发的。Typescript资料不多，所以没有配置。现在nuxt越来越成熟，下半年的目标是掌握Typescript，所以代码逻辑的整体配置和重构，开始吧！文章分为两部分：一、项目入口建设；2、VScode配置eslint校验美化代码的Prettier工程构建：下载nuxt脚手架npxcreate-nuxt-app
背景之前公司项目用的nuxt是开发的。Typescript资料不多，所以没有配置。现在nuxt越来越成熟，下半年的目标是掌握Typescript，所以代码逻辑的整体配置和重构，开始吧！文章分为两部分：一、项目入口建设；2、VScode配置eslint校验美化代码的Prettier工程构建：下载nuxt脚手架npxcreate-nuxt-app{{message}}配置Vsode：配置package.json"devDependencies":{"@nuxt/typescript-build":"latest","@nuxtjs/eslint-config-typescript":"^1.0.0","@typescript-eslint/eslint-plugin":"^2.13.0","ant-design-vue":"^1.1.10","babel-eslint":"^8.2.1","eslint":"^5.0.1","eslint-config-prettier":"^3.1.0","eslint-loader":"^2.0.0","eslint-plugin-prettier":"2.6.2","eslint-plugin-vue":"^4.0.0","nodemon":"^1.18.9","prettier":"1.14.3"}新建一个.eslintrc.js【记得在vscode下载eslint插件】module.exports={root:true,env:{browser:true,node:true},parserOptions:{parser:'@typescript-eslint/解析器'}，扩展：['plugin:vue/recommended'，'@nuxtjs/eslint-config-typescript'，'plugin：prettier/recommended']，插件：['vue'，'prettier'，'@typescript-eslint'],globals:{API:false,Vue:false,process:false},rules:{'no-var':2,'no-class-assign':2,//禁止给类赋值'no-cond-assign':2,//禁止在条件表达式中使用赋值语句'no-constant-condition':2,//禁止在条件中使用常量表达式if(true)if(1)'no-dupe-args':2,//函数参数不能重复'no-else-return':2,//如果if语句中有return，后面不能跟else语句'no-func-assign':2,//禁止重复函数声明'no-multi-spaces':1,//Do不使用冗余空格'no-multiple-empty-lines':[1,{max:2}],//空行不超过2'no-redeclare':2,//禁止重复声明变量'no-trailing-spaces':1,//行尾后没有空格'no-undef':1,//不能有未定义的变量camelcase:2,//强制驼峰大小写eqeqeq:2,//必须使用congruent'accessor-pairs':2,//在逗号后添加空格'spaced-comment':2,//在注释后添加空格'no-unreachable':2,//不能有无法访问的代码'no-use-before-define':2,//undefined前不能使用'no-unused-expressions':2,//禁止无用的表达式'no-unused-vars':2//禁止无用的变量}};创建prettier.config.js//prettier.config.js或.prettierrc.jsmodule.exports={//每行最多100个字符printWidth:100,//使用4个空格进行缩进tabWidth:4,//无缩进，和使用空格useTabs:false,//行尾需要一个分号semi:true,//使用单引号singleQuote:true,//只在必要时引用对象的keyquoteProps:'as-needed',//jsx不使用单引号，而是使用双引号jsxSingleQuote:false,//不require末尾有逗号trailingComma:'none',//大括号首末需要空格bracketSpacing:true,//jsx标签后面的尖括号需要换行jsxBracketSameLine:false,//箭头函数,当只有一个参数时，还需要括号arrowParens:'always',//每个文件的格式化范围是文件的全部内容rangeStart:0,rangeEnd:Infinity,//不需要在后面写@prettierbeginningofthefilerequirePragma:false,//不需要在文件开头自动插入@prettierinsertPragma:false,//使用默认包装标准proseWrap:'preserve',//决定是否包装html显示样式htmlWhitespaceSensitivity:'css',//使用lfendOfLine:'lf'};创建换行符。vscode/settings.json路径：【Preferences/Settings/FileEditor/File】选择【Workspace】PS：如果维护多个项目，最好在工作区编辑{"files.eol":"\n","editor.tabSize":4,"editor.formatOnSave":true,"editor.defaultFormatter":"esbenp.prettier-vscode","eslint.validate":["javascript","javascriptreact","vue"],"typescript.tsdk":"node_modules/typescript/lib","editor.codeActionsOnSave":{"source.fixAll.eslint":true}}参考：https://typescript.nuxtjs.org/guide/【官网】https://github.com/nuxt/typescript/issues/49【案例】https://www.typescriptlang.org/docs/handbook/compiler-options.htmlhttps://juejin.im/post/5dcbd9ddf265da307879fdf3【掘金】https://ts.xcatliu.com/engineering/lint【vscodetslint】https://juejin.im/post/5afede99f265da0b82630af8https://prettier.io/docs/en/options.html#prose-wrap【prettier】https://github.com/ElemeFE/el...https://prettier.io/docs/en/options.html#prose-wrap://segmentfault.com/a/11...其他：如果配置有问题：比如：eslint在页面上没有生效？然后看看你的【Preferences/Settings/FileEditor/File】【User】里有没有其他设置妨碍操作？或者在编程模式下评论所有细节，FailedtoshowNuxt.jsappafter5reloads#1.reset$rm-rfnode\_modules$rmpackage-lock.json#2.installnuxtfirst$npminuxt--save#3.第二个安装另外两个模块$npmi@nuxt/typescript-build@nuxt/typescript-runtime--save#4.最后安装其他模块$npmi#5.它工作了!!$npmrundevhowto导入头方法？点我@Component({head(this:news):object{return{title:'我是xxx'};}})配置Typescript总是报错？尝试删除你的ackage-lock.json文件，重新下载，或者删除你的node_modules重新下载，更新nuxt到最新并尝试将josn文件导入vue组件报错[Module'xxx.json'被解析为'xxxx.json'，但是没有使用'--resolveJsonModule'。Vetur(7042)]然后尝试在tsconfig.josn中配置resolveJsonModule:true，同时重启Vscode；ps：不是项目重启，而是vscode直接退出，然后重新打开项目哦，如果你全局注入变量，[Property'$axios'doesnotexistontype'defaults'.Vetur(2339)]你需要从'vue'创建一个xxx.d.tsimportVue；声明模块'vue/types/vue'{interfaceVue{$axios:any;}}